AngularJS Формы

Формы AngularJS — это коллекции элементов управления вводом.

Элементы управления HTML

Следующие HTML-элементы ввода называются HTML-элементами управления:

  • элемент input
  • элемент select
  • элемент button
  • элемент textarea

Привязка данных

Элементы управления вводом используют директиву ng-model для привязки данных.

<input type="text" ng-model="firstname">

Благодаря приведённому выше коду приложение имеет свойство с именем firstname.

Оно привязывается к вашему приложению с помощью директивы ng-model.

Свойство firstname можно использовать в контроллере:

Пример

var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) { $scope.firstname = "Джон"; });

Попробуйте сами »

Это также можно использовать в других местах приложения:

Пример

<форма> Имя: <input type="text" ng-model="firstname"> </form> <h1>Вы ввели: {{firstname}}</h1>

Попробуйте сами »

Флажок

Значение флажка — true или false. Его можно привязать с помощью директивы ng-model, и его значение можно использовать в приложении:

Пример

После выбора флажка отображается содержимое тега h1:

<форма> Установите флажок, чтобы показать заголовок: <input type="checkbox" ng-model="myVar"> </form> <h1 ng-show="myVar">Мой заголовок</h1>

Попробуйте сами »

Радиокнопки

Мы можем использовать ng-model, чтобы привязать радиокнопки к вашему приложению.

Радиокнопки используют одну и ту же ng-model и могут иметь разные значения, но будет использоваться только значение выбранной радиокнопки.

Пример

Отображение информации на основе выбранной радиокнопки:

<form>Выберите вариант:<input type="radio" ng-model="myVar" value="dogs">Собаки <input type="radio" ng-model="myVar" value="tuts">Руководства <input type="radio" ng-model="myVar" value="cars">Автомобили </form>

Попробуйте сами »

Значение myVar может быть dogs, tuts или cars.

Выпадающие меню

Вы можете привязать выпадающее меню к вашему приложению с помощью директивы ng-model.

Значение атрибута ng-model — это выбранный вами вариант в выпадающем меню:

Пример

Отображение информации на основе выбранного пункта выпадающего меню:

<form>Выберите вариант:<select ng-model="myVar"> <option value=""> <option value="dogs">Собаки <option value="tuts">Уроки <option value="cars">Автомобили </select> </форма>

Попробуйте сами »

Значение myVar может быть dogs, tuts или cars.

HTML-формы

HTML-формы обычно существуют вместе с HTML-элементами управления.

Пример форм AngularJS

Имя:

Фамилия:


form = {{user}}

master = {{master}}

Код приложения

<div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> Имя:<br> <input type="text" ng-model="user.firstName"><br> Фамилия:<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>

Попробуйте сами »
Note novalidateЭтот атрибут является новым в HTML5. Он отключает стандартную проверку браузера.

Пояснение примера

ng-appДиректива определяет приложение AngularJS.

ng-controllerДиректива определяет контроллер приложения.

ng-modelДиректива связывает два элемента input с userобъектом модели.

formCtrlФункция устанавливаетmasterначальное значение объекта и определяетreset()метод.

reset()Метод устанавливаетuserобъект равнымmasterобъекту.

ng-clickДиректива вызываетreset()метод, и он вызывается при нажатии кнопки.

Атрибут novalidate не требуется в приложении, но его нужно использовать в формах AngularJS, чтобы переопределить стандартную валидацию HTML5.

Другие расширения