AngularJS директива нг-модель
Инструкция нг-модель используется для привязки данных приложения к контроллеру значения HTML (ввод, выберите текстовое поле) из.
Директива нг-модель
ng-model директива может ввести значения переменных и AngularJS домен , созданный привязок.
AngularJS примеры
<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl">
Имя: <ввод нг-модель = " название">
</ Div>
<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'myCtrl', функция ($ сфера) {
$ Scope.name = "John Doe";
});
</ Script>
Имя: <ввод нг-модель = " название">
</ Div>
<Script>
вар приложение = angular.module ( 'MYAPP', []);
app.controller ( 'myCtrl', функция ($ сфера) {
$ Scope.name = "John Doe";
});
</ Script>
Попробуйте »
способ связывания
Двустороннее связывание, при изменении значения поля ввода, значение свойства будет также AngularJS Обзор:
AngularJS примеры
<Div нг-приложение = "MyApp " нг-контроллер = "myCtrl">
Имя: <ввод нг-модель = " название">
<H1> вы вводите: {{имя}} </ h1>
</ Div>
Имя: <ввод нг-модель = " название">
<H1> вы вводите: {{имя}} </ h1>
</ Div>
Попробуйте »
Подтвердить ввод данных пользователем
AngularJS примеры
<Форма нг-приложение = "" название = "MyForm">
E-mail:
<Тип входного = название "электронная почта" = "myAddress" нг-модель = "Текст">
<SPAN нг-шоу = "myForm.myAddress . $ Error.email"> не является действительным адресом электронной почты </ SPAN>
</ Форма>
E-mail:
<Тип входного = название "электронная почта" = "myAddress" нг-модель = "Текст">
<SPAN нг-шоу = "myForm.myAddress . $ Error.email"> не является действительным адресом электронной почты </ SPAN>
</ Форма>
Попробуйте »
В приведенном выше примере, сообщение в ng-show свойства возвращает true витрину.
состояние приложения
ng-model директива обеспечивает значение состояния (неверно, грязная, потрогать, ошибки ) для данных приложения:
AngularJS примеры
<Форма нг-приложение = "" название = "MyForm" нг-Init = "MyText = '[email protected]'">
E-mail:
<Тип = Введите имя "электронная почта" = "myAddress" нг-модель = "MyText" требуется> </ p>
<H1> Статус </ h1>
{{MyForm.myAddress. $ Действительным}}
{{MyForm.myAddress. $ Загрязнен}}
{{MyForm.myAddress. $ Прикоснулся}}
</ Форма>
E-mail:
<Тип = Введите имя "электронная почта" = "myAddress" нг-модель = "MyText" требуется> </ p>
<H1> Статус </ h1>
{{MyForm.myAddress. $ Действительным}}
{{MyForm.myAddress. $ Загрязнен}}
{{MyForm.myAddress. $ Прикоснулся}}
</ Форма>
Попробуйте »
класс CSS
ng-model инструкция на основе их состояний предоставляют классы CSS для HTML - элементов:
AngularJS примеры
<Style>
input.ng-инвалида {
цвет фона: Lightblue;
}
цвет фона: Lightblue;
}
</ Style>
<Body>
<Форма нг-приложение = "" название = "MyForm">
Введите свое имя:
<Введите имя = "myAddress" нг -моделью = "текст" требуется>
</ Форма>
<Body>
<Форма нг-приложение = "" название = "MyForm">
Введите свое имя:
<Введите имя = "myAddress" нг -моделью = "текст" требуется>
</ Форма>
Попробуйте »
ng-model инструкция на основе государственной поля формы , чтобы добавить / удалить следующие категории:
- нг-пусто
- нг-не пусто
- нг-прикоснулся
- нг-незатронутыми
- нг-действительный
- нг-инвалида
- нг-грязный
- нг рассматриваемой
- нг-нетронутые