Najlepszy samouczek Angularjs dyrektywy ng model W 2024 r. W tym samouczku możesz dowiedzieć się
Dyrektywa ng model,angularjs przykłady,sposób wiązania,angularjs przykłady,Walidacji danych wprowadzanych przez użytkownika,angularjs przykłady,stan aplikacji,angularjs przykłady,Klasa CSS,angularjs przykłady,
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>
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>
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>
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 = 'test@w3write.com" ">
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;
}
</ Style>
<Body>
<Formularz ng-app = "" name = "myForm">
Wpisz swoje imię i nazwisko:
<Nazwa Wejście = "myAddress" ng -Model = "text" niezbędna>
</ Form>
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