Формы в AngularJS обеспечивает привязку данных и проверки элементов управления вводом.
элементы управления вводом
Элементы управления вводом являются HTML элементы ввода:
- элементы ввода
- выберите элементы
- Кнопка элементы
- TextArea элементы
Привязки данных
Элементы управления вводом обеспечивает привязку данных с помощью 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>
Попробуй сам " Радио-кнопки
Bind радио - кнопки для вашего приложения с 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 пример формы
форма = {{}} пользователь
мастер = {{мастер}}
Применение Код
<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. Это отключает проверку любого браузера по умолчанию. |
|---|
Пример Разъяснения
Директива нг-приложение определяет приложение AngularJS.
Директива нг-контроллер определяет контроллер приложения.
Директива нг-модель связывает два входных элементы пользовательского объекта в модели.
Контроллер formCtrl устанавливает начальные значения для главного объекта, и определяет метод сброса ().
Метод сброса () задает объект пользователя , равный основной объект.
Директива нг-клик вызывает метод сброса (), только если кнопка нажата.
NOVALIDATE атрибут не требуется для этого приложения, но обычно вы будете использовать его в AngularJS формах, чтобы переопределить стандартную проверку HTML5.