AngularJS Директива ng-model
Директива ng-model используется для привязки данных приложения к значениям элементов управления HTML (input, select, textarea).
Директива ng-model
ng-modelДирективы могут привязывать значения полей ввода к переменным, созданным AngularJS.
Примеры AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Имя:<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
Имя:<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
Попробуйте сами »
Двусторонняя привязка
Двусторонняя привязка: когда значение поля ввода изменяется, значение свойства AngularJS также изменяется:
Примеры AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
Имя:<input ng-model="name">
<h1>Вы ввели:{{name}}</h1>
</div>
Имя:<input ng-model="name">
<h1>Вы ввели:{{name}}</h1>
</div>
Попробуйте сами »
Проверка пользовательского ввода
Примеры AngularJS
<form ng-app="" name="myForm">
Электронная почта:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Недопустимый адрес электронной почты</span>
</form>
Электронная почта:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Недопустимый адрес электронной почты</span>
</form>
Попробуйте сами »
В приведённом выше примере будет отображено сообщение-подсказкаng-showСвойство возвращаетtrueпри следующих условиях.
Применённое состояние
ng-modelДиректива может предоставлять значения состояния для данных приложения (invalid, dirty, touched, error):
Примеры AngularJS
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Электронная почта:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Измените адрес электронной почты, чтобы увидеть изменения состояния.</p>
<h1>Состояние</h1>
<p>Допустимо: {{myForm.myAddress.$valid}} (истина, если значение поля ввода допустимо).</p>
<p>Изменено: {{myForm.myAddress.$dirty}} (истина, если значение изменилось).</p>
<p>Затронуто: {{myForm.myAddress.$touched}} (истина, если нажато через сенсорный экран).</p>
Попробуйте сами »
CSS-классы
ng-modelДирективы предоставляют CSS-классы HTML-элементам в зависимости от их состояния:
Примеры AngularJS
<style>
input.ng-invalid {
background-color: lightblue;
}
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Введите ваше имя:
<input name="myAddress" ng-model="text" required>
</form>
<body>
<form ng-app="" name="myForm">
Введите ваше имя:
<input name="myAddress" ng-model="text" required>
</form>
Попробуйте сами »
ng-modelДирективы добавляют/удаляют следующие классы в зависимости от состояния полей формы:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine