Angularjs NG-Model Directive
Директива NG-Model используется для привязки данных приложения к значению контроллера HTML (вход, Select, Textarea).
NG-модель команда
Директива NG-модели связывает значение поля ввода с переменной, созданной AngularJS.
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> name: <input ng-model = "name"> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ acum Ввод домена в свойства контроллера. </p> </body> </html>Результаты работы:
имя:Используйте директиву NG-Model, чтобы связать значение поля ввода с свойствами контроллера.
Двусторонняя переплета
Двунаправленное связывание при изменении значения входного поля значение также будет изменено значение AngularJS:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> name: <input ng-model = "name"> <h1> вы ввели: {{name}} </h1> </div> <script> var app = angular.module ('myApp', []); App.Controller ('myCtrl', function ($ racope) Doe ";}); </script> <p> Измените значение окна ввода, и имя заголовка также будет изменено соответствующим образом. </p> </body> </html>Результаты работы:
имя:
Вы вошли: Джон Доу
Измените значение блока ввода, и название заголовка также будет изменено соответствующим образом.
Проверьте пользовательский ввод
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> waniffire> </head> <body> <form ng- ng-apapp = ">"> ">" </script> </head> <body> <form ng- ngapp = ">"> "<>" </script> </head> <body> <form ng- App = " name = "myAddress" ng-model = "text"> <span ng-show = "myform.myaddress. $ error.email"> не является законным адресом электронной почты </span> </form> <p> Введите свой адрес электронной почты в поле ввода. Если это не легальный адрес электронной почты, появится быстрое сообщение. </p> </body> </html>
Результаты работы:
Электронная почта:
Введите свой адрес электронной почты в поле ввода. Если это не легальный адрес электронной почты, появится быстрое сообщение.
CSS Class
Директива NG-Model предоставляет класс CSS для элементов HTML на основе их состояния:
AngularJs Extance
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <style> input.ng-ing- LightBlue;} </style> </head> <body> <form ng-app = "" name = "myform"> Введите свое имя: <input name = "myname" ng-model = "mytext" требуется> </form> <p> Редактировать поля текста, и фоновые цвета разных состояний будут отправлены на изменение. </p> <p> Требуемый атрибут добавляется в текстовое поле, которое требуется, и является незаконным, если пуст. </p> </body> </html>
Результаты работы:
Отредактируйте текстовое поле, фоновые цвета разных состояний будут отправлены в изменения.
Текстовое поле добавило требуемое свойство, которое требуется, и является незаконным, если пуст.
Директива NG-Model добавляет/удаляет следующие классы в соответствии со статусом поля формы:
Нг-Эмпти
ng-not-empty
NG-Touch
NG-untouch
ng-valid
ng-invalid
ng-dirty
NG-ожидание
NG-Pristine