Angularjs dyrektywy ng model
Instrukcja ng model jest używany do wiązania danych aplikacji do regulatora wartości HTML (input, select, textarea) z.
Dyrektywa ng model
ng-model dyrektywa może wprowadzić zmienne wartości i angularjs domen tworzone powiązania.
angularjs przykłady
<Div ng-app = "myApp " NG-controller = "myCtrl">
Nazwa: <input ng model = " name">
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl ', function ($ zakres) {
$ Scope.name = "John Doe";
});
</ Script>
Nazwa: <input ng model = " name">
</ Div>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "myCtrl ', function ($ zakres) {
$ Scope.name = "John Doe";
});
</ Script>
Spróbuj »
sposób wiązania
Dwukierunkowe wiązanie, kiedy zmienić wartość pola wprowadzania danych, wartość nieruchomości będzie również angularjs Review:
angularjs przykłady
<Div ng-app = "myApp " NG-controller = "myCtrl">
Nazwa: <input ng model = " name">
<H1> wpisać: {{nazwa}} </ h1>
</ Div>
Nazwa: <input ng model = " name">
<H1> wpisać: {{nazwa}} </ h1>
</ Div>
Spróbuj »
Walidacji danych wprowadzanych przez użytkownika
angularjs przykłady
<Formularz ng-app = "" name = "myForm">
E-mail:
<Input type = "email" name = "myAddress" ng model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> nie jest prawidłowy adres e-mail </ span>
</ Form>
E-mail:
<Input type = "email" name = "myAddress" ng model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> nie jest prawidłowy adres e-mail </ span>
</ Form>
Spróbuj »
Powyższy przykład, komunikat w ng-show nieruchomości wraca true gablotę.
stan aplikacji
ng-model dyrektywy stanowi wartość statusu (nieważne, brudne, dotknął, błąd ) dla danych aplikacji:
angularjs przykłady
<Formularz ng-app = "" name = "myForm" NG-startowych = "myText = '[email protected]" ">
E-mail:
<Wejście type = "email" name = "myAddress" ng model = "myText" wymagane> </ p>
<H1> Stan </ h1>
{{MyForm.myAddress. $ Valid}}
{{MyForm.myAddress. $ Brudne}}
{{MyForm.myAddress. $ Dotknął}}
</ Form>
E-mail:
<Wejście type = "email" name = "myAddress" ng model = "myText" wymagane> </ p>
<H1> Stan </ h1>
{{MyForm.myAddress. $ Valid}}
{{MyForm.myAddress. $ Brudne}}
{{MyForm.myAddress. $ Dotknął}}
</ Form>
Spróbuj »
Klasa CSS
ng-model wskazówki w oparciu o ich stanach dostarczyć klas CSS dla elementów HTML:
angularjs przykłady
<Style>
input.ng-invalid {
background-color: jasnoniebieski;
}
background-color: jasnoniebieski;
}
</ Style>
<Body>
<Formularz ng-app = "" name = "myForm">
Wpisz swoje imię i nazwisko:
<Nazwa Wejście = "myAddress" ng -Model = "text" niezbędna>
</ Form>
<Body>
<Formularz ng-app = "" name = "myForm">
Wpisz swoje imię i nazwisko:
<Nazwa Wejście = "myAddress" ng -Model = "text" niezbędna>
</ Form>
Spróbuj »
ng-model wskazówki w oparciu o stan pola formularza, aby dodać / usunąć następujące kategorie:
- ng pusty
- ng-nie-pusta
- ng-dotknął
- ng-nietknięty
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-nietknięty