Формы AngularJS
Формы в AngularJS обеспечивают привязку данных и проверку элементов управления вводом.
Элементы управления вводом
Элементы управления вводом — это элементы ввода HTML:
- элементы ввода
- выбрать элементы
- элементы кнопки
- элементы текстового поля
Привязка данных
Элементы управления вводом обеспечивают привязку данных с помощью
ng-modelдирективы.
<input type="text" ng-model="firstname">
Приложение теперь имеет свойство с именем firstname.
Директива ng-modelсвязывает контроллер ввода с остальной частью вашего приложения.
На свойство firstnameможно ссылаться в контроллере:
Пример
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.firstname = "John";
});
</script>
На него также можно ссылаться в другом месте приложения:
Пример
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
Флажок
Флажок имеет значение trueили false. Примените
ng-modelдирективу к флажку и используйте его значение в своем приложении.
Пример
Показать заголовок, если флажок установлен:
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My
Header</h1>
Радио-кнопки
Привяжите переключатели к вашему приложению с помощью ng-model
директивы.
Радиокнопки с одинаковыми ng-modelмогут иметь разные значения, но будет использоваться только выбранное.
Пример
Отобразите некоторый текст в зависимости от значения выбранного переключателя:
<form>
Pick a topic:
<input type="radio" ng-model="myVar"
value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Значение myVar будет либо dogs, tutsлибо
cars.
Поле выбора
Привяжите поля выбора к вашему приложению с помощью ng-model
директивы.
Свойство, определенное в ng-modelатрибуте, будет иметь значение выбранного параметра в поле выбора.
Пример
Отобразить некоторый текст в зависимости от значения выбранного параметра:
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option
value="cars">Cars
</select>
</form>
Значение myVar будет либо dogs, tutsлибо
cars.
Пример формы AngularJS
form = {"firstName":"Джон","lastName":"Доу"}
master = {"firstName":"Джон","lastName":"Доу"}
Код приложения
<div ng-app="myApp" ng-controller="formCtrl">
<form
novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last
Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('formCtrl',
function($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user
= angular.copy($scope.master);
};
$scope.reset();
});
</script>
Атрибут novalidate является новым в HTML5. Он отключает любую проверку браузера по умолчанию.
Объяснение примера
Директива ng-app определяет приложение AngularJS.
Директива ng-controller определяет контроллер приложения.
Директива ng-model связывает два элемента ввода с пользовательским объектом в модели.
Контроллер formCtrl устанавливает начальные значения для главного объекта и определяет метод reset() .
Метод reset() устанавливает пользовательский объект равным главному объекту.
Директива ng-click вызывает метод reset() , только если кнопка нажата.
Атрибут novalidate не требуется для этого приложения, но обычно вы будете использовать его в формах AngularJS, чтобы переопределить стандартную проверку HTML5.