Сейчас мы изучим некоторые полезные директивы.

Директива ng-show

Давайте разберем директиву ng-show. Она используется для показа или сокрытия элементов.

В эту директиву следует передавать переменную. Если эта переменная имеет значение true - элемент показан, если false - скрыт.

Вот пример такого элемента: если переменная $scope.check имеет значение true - элемент будет показан и наоборот:

<p ng-show="check">Абзац с текстом.</p>

Давайте к этому абзацу привяжем чекбокс: если он отмечен - абзац будет показан, а если не отмечен - скрыт:

<input type="checkbox" ng-model="check">
<p ng-show="check">Абзац с текстом.</p>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {

			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-model="check">
		<p ng-show="check">Абзац с текстом.</p>
	</body>
</html>

У нас должно получиться следующее (понажимайте на чекбокс и вы увидите, как будет появляется и исчезать абзац):

Вы можете открыть этот пример в отдельной вкладке браузера.

Директива ng-hide

Аналогично, только наоборот, работает директива ng-hide, только, если для этой директивы передать true - то элемент скроется, а если false - покажется.

То есть при использовании ng-hide наш абзац по умолчанию будет показан, а при использовании ng-show - скрыт.

Пример:

<input type="checkbox" ng-model="check">
<p ng-hide="check">Абзац с текстом.</p>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {

			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-model="check">
		<p ng-hide="check">Абзац с текстом.</p>
	</body>
</html>

У нас должно получиться следующее (понажимайте на чекбокс и вы увидите, как будет появляется и исчезать абзац):

Вы можете открыть этот пример в отдельной вкладке браузера.

Директива ng-class

Следующая полезная директива, которая нам нужна, называется ng-class. Она позволяет применять CSS классы к элементу в зависимости от значений переменных.

Пусть у нас дан класс .colored, который красит элемент в зеленый цвет:

.colored {
	color: green;
}

Давайте привяжем этот класс к абзацу с помощью ng-class. Так как передан true - то абзац будет покрашен:

<p ng-class="{colored: true}">Абзац с текстом.</p>

Если передать false - то элемент не будет покрашен:

<p ng-class="{colored: false}">Абзац с текстом.</p>

Давайте привяжем чекбокс - если он отмечен, то абзац будет зеленым, а если не отмечен - не будет:

.colored {
	color: green;
}
<input type="checkbox" ng-model="check">
<p ng-class="{colored: check}">Абзац с текстом.</p>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<style>
		.colored {
			color: green;
		}
		 </style>
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {

			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-model="check">
		<p ng-class="{colored: check}">Абзац с текстом.</p>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Много классов

В ng-class можно привязать не один класс, а несколько. Пусть у нас есть два класса: .colored и .bordered. Привяжем их к двум разным чекбоксам:

.colored {
	color: green;
}
.bordered {
	border: 1px solid green;
}
<input type="checkbox" ng-model="check1">
<input type="checkbox" ng-model="check2">
<p ng-class="{colored: check1, bordered: check2}">Абзац с текстом.</p>

Давайте попробуем запустить этот код:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<style>
		.colored {
			color: green;
		}
		.bordered {
			border: 1px solid green;
		}
		 </style>
		<script src="angular.js"></script>
		<script>
			var myApp = angular.module('myApp', []);

			myApp.controller('MyController', function MyController($scope) {

			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-model="check1">
		<input type="checkbox" ng-model="check2">
		<p ng-class="{colored: check1, bordered: check2}">Абзац с текстом.</p>
	</body>
</html>

У нас должно получиться следующее:

Вы можете открыть этот пример в отдельной вкладке браузера.

Работа с селектами

Работу с селектами пока см. тут ngOptions и ngSelected. Попозже допишу ее:)