Сейчас мы с вами займемся получением данных из инпутов, а также работой с чекбоксами. Приступим:)

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

Пусть у нас есть обычный текстовый инпут. Сделаем так, чтобы по мере ввода данных в инпут, эти данные попадали в переменную $scope.message. Для этого инпуту следует добавить атрибут ng-model, значением которого следует указать 'message':

<input ng-model="message">

Теперь по мере ввода данных в инпут мгновенно будет изменятся $scope.message и, соответственно, мы можем вывести {{message}} в любом удобном нам месте - эта переменная тоже будет изменяться мгновенно (по вводу каждого символа):

<input ng-model="message">
<p>Ваше сообщение: {{message}}</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 ng-model="message">
		<p>Ваше сообщение: {{message}}</p>
	</body>
</html>

У нас должно получиться следующее (введите данные в инпут - вы увидите нужный эффект):

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

По загрузке

В предыдущем примере $scope.message изначально было пустым, а потом туда попали данные из инпута. Но на самом деле связь двухсторонняя - если поменять $scope.message, то значение инпута тоже поменяется.

Давайте сделаем так, чтобы по загрузке страницы в $scope.message уже лежало какое-то значение (в нашем случае 'Привет!'):

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
	$scope.message = 'Привет!';
});
<input ng-model="message">
<p>Ваше сообщение: {{message}}</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) {
				$scope.message = 'Привет!';
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="message">
		<p>Ваше сообщение: {{message}}</p>
	</body>
</html>

Если вы скопируете этот код, запустите у себя в браузере, то у вас должно получиться следующее:

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

Объект

В атрибуте ng-model можно передавать не только обычные переменные (числа и строки), но и элементы массива и свойства объекта.

Что имеется ввиду: если у нас, например, дан объект $scope.user со значением {name: 'Иван', age: 30}, то с помощью инпута можно изменять только имя (ключ name) или только возраст (ключ age). Для этого в ng-model следует передать user.name для имени и user.age для возраста.

Давайте сделаем два инпута: один для изменения имени, а второй - для изменения возраста:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
	$scope.user = {name: 'Иван', age: 30};
});
<input ng-model="user.name">
<input ng-model="user.age">
<p>Имя: {{user.name}}, возраст: {{user.age}}</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) {
				$scope.user = {name: 'Иван', age: 30};
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="user.name">
		<input ng-model="user.age">
		<p>Имя: {{user.name}}, возраст: {{user.age}}</p>
	</body>
</html>

Если вы скопируете этот код, запустите у себя в браузере, то у вас должно получиться следующее:

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

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

В предыдущих примерах по мере ввода данных в инпут изменения в HTML коде происходили мгновенно. Однако, такое поведение иногда может мешать.

Если вам нужно, чтобы изменения происходили после ввода данных в инпут - используйте атрибут ng-blur. В нем указывается функция (с круглыми скобками на конце, как и в ng-click), которая выполнится по потери фокуса инпутом.

Давайте решим следующую задачу: дан инпут, в него вводится число, по потери фокуса найдем корень из этого числа и запишем в абзац ниже.

Для этого в инпут добавим две директивы: ng-model="num" будет записывать данные из инпута в $scope.num, а ng-blur="showSqrt()" выполнит функцию $scope.showSqrt по окончанию ввода данных:

<input ng-model="num" ng-blur="showSqrt()">

Реализуем функцию $scope.showSqrt в контроллере - извлечем внутри нее корень из $scope.num и запишем его в $scope.sqrt:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
	$scope.showSqrt = function () {
		$scope.sqrt = Math.sqrt($scope.num);
	}
});

Теперь у нас доступна переменная $scope.sqrt - выведем ее в абзаце под инпутом:

<input ng-model="num" ng-blur="showSqrt()">
<p>Корень из числа: {{sqrt}}</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) {
				$scope.showSqrt = function () {
					$scope.sqrt = Math.sqrt($scope.num);
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="num" ng-blur="showSqrt()">
		<p>Корень из числа: {{sqrt}}</p>
	</body>
</html>

Если вы скопируете этот код, запустите у себя в браузере, то у вас должно получиться следующее:

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

Важное замечание

Учтите, что при использовании ng-blur атрибут ng-model указывать обязательно.

Совместим ng-repeat для списка и инпут с ng-blur

Пусть у нас дан массив с пользователями. Давайте выведем содержимое этого массива в виде списка <ul>, а затем добавим инпут, с помощью которого мы будем добавлять новые элементы в этот список.

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

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
	$scope.users = ['Коля', 'Вася', 'Петя'];
});
<ul>
	<li ng-repeat="user in users">{{user}}</li>
</ul>

Добавим теперь инпут с ng-model и ng-blur:

<input ng-model="newUser" ng-blur="addUser()">
<ul>
	<li ng-repeat="user in users">{{user}}</li>
</ul>

По окончанию ввода данных в инпут будет вызываться функция $scope.addUser. В этой функции будет доступна переменная $scope.newUser, в которой хранится новый только что введенный пользователь. Добавим его в массив $scope.users с помощью JavaScript метода push:

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {
	$scope.users = ['Коля', 'Вася', 'Петя'];

	$scope.addUser = function () {
		$scope.users.push($scope.newUser);
	}
});

Вот, в общем-то, и все. Соберем все вместе и запустим:

<!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) {
				$scope.users = ['Коля', 'Вася', 'Петя'];

				$scope.addUser = function () {
					$scope.users.push($scope.newUser);
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input ng-model="newUser" ng-blur="addUser()">
		<ul>
			<li ng-repeat="user in users">{{user}}</li>
		</ul>
	</body>
</html>

После запуска этого кода вы можете вбить нового пользователя в инпут, потерять фокус из инпута и у вас автоматически появится новый пункт списка (напоминаю: ng-repeat работает таким образом, что добавление дублей в список невозможно):

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

Чекбоксы

Давайте теперь разберемся с чекбоксами. Им тоже допустимо задавать атрибут ng-model - в этом случае в переменную, указанную в этом атрибуте, положится true, если чекбокс отмечен и false - если не отмечен.

Давайте попробуем на практике - зададим в ng-model переменную checked и выведем ее в абзац ниже:

<input type="checkbox" ng-model="checked">
<p>Значение чекбокса: {{checked}}</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="checked">
		<p>Значение чекбокса: {{checked}}</p>
	</body>
</html>

Понажимайте на чекбокс - вы увидите как {{checked}} меняет свое значение:

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

Чекбокс и ng-change

Давайте изучим следующий атрибут - ng-change. Он позволяет задавать функцию, которая будет срабатывать по изменению инпута (любого - и текстового, и чекбокса).

Давайте сделаем так, чтобы по смене состояния чекбокса вызывалась функция $scope.checkboxChange и выводила определенное сообщение:

<!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) {
				$scope.checkboxChange = function () {
					$scope.message = 'чекбокс изменен, состояние: '+$scope.checked;
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-change="checkboxChange()" ng-model="checked">
		<p>Сообщение: {{message}}</p>
	</body>
</html>

Смените состояние чекбокса - и вы увидите сообщение:

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

Счетчик нажатий чекбоксов

Реализуем счетчик нажатий по чекбоксу (разберите этот код самостоятельно):

<!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) {
				var i = 0;
				$scope.checkboxChange = function () {
					$scope.counter = i;
					i++;
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<input type="checkbox" ng-change="checkboxChange()" ng-model="checked">
		<p>Текущее состояние: {{checked}}</p>
		<p>Количество изменений чекбокса: {{counter}}</p>
	</body>
</html>

Так он работает:

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

Атрибут ng-checked

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

Давайте сделаем переменную $scope.check, которая сделает чекбокс с ng-checked="check" уже отмеченным при заходе на страницу:

<!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) {
				$scope.check = true;
			});
		</script>
	</head>
	<body ng-controller="MyController">
<input type="checkbox" ng-checked="check">
	</body>
</html>

Меняем состояние чекбокса по событию

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

<!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) {
				$scope.check = true;

				$scope.changeCheck = function () {
					$scope.check = false;
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<button ng-click="changeCheck()">Сделать чекбокс неотмеченным</button>
		<input type="checkbox" ng-checked="check">
	</body>
</html>

Если запустить этот код, вы увидите следующее:

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

Смена состояния на противоположное

А теперь сделаем так, чтобы по нажатию на кнопку чекбокс менял свое состояние на противоположное:

<!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) {
				$scope.check = true;

				$scope.changeCheck = function () {
					$scope.check = !$scope.check;
				}
			});
		</script>
	</head>
	<body ng-controller="MyController">
		<button ng-click="changeCheck()">Сменить состояние чекбокса</button>
		<input type="checkbox" ng-checked="check">
	</body>
</html>

Если запустить этот код, вы увидите следующее:

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

Связанные друг с другом чекбоксы

Сделаем так, чтобы при смене первого чекбокса менял свое состояние и второй. Это совсем просто:

<input type="checkbox" ng-model="check">
<input type="checkbox" ng-checked="check">

Полный код:

<!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">
		<input type="checkbox" ng-checked="check">
	</body>
</html>

Если запустить этот код, вы увидите следующее:

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