AngularJS ng-model ɪndikasyon
- Nakaraang Pahina Directives ngAngularJS
- Susunod na Pahina Data Binding ngAngularJS
ng-model Ang iminungkahi ay ibibind ang halaga ng HTML control (input, select, textarea) sa datos ng aplikasyon.
ng-model iminungkahi
Gamit ang ng-model Ang iminungkahi, maaari mong i-bind ang halaga ng input field sa variable na nilikha sa AngularJS.
instance
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Bill Gates";
});
</script>
Parehong direksyong pagkakabit
Ang pagkakabit ay parehong direksyon. Kapag nagbago ang halaga ng input field ng user, ang attribute ng AngularJS ay magbabago din ang halagang iyon:
instance
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>Pinasasalita mo: {{name}}</h1>
</div>
Pag��证 ng pagipost ng user
ng-model Ang iminungkahi ay maaaring magbigay ng pag��证 ng uri sa datos ng aplikasyon (nilikha, email, madaliang isama):
instance
<form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">Hindi isang wastong email address</span> </form>
Sa halimbawa sa itaas, lamang kapag ng-show Ang expression sa propyety ay binabalik true kapag, ang span ay magpapakita lamang.
Kung ng-model Ang propyety ng propyety ay wala, ang AngularJS ay maglilikha para sa iyo ng isa.
Estado ng aplikasyon
ng-model Ang iminungkahi ay maaaring magbigay ng estado ng datos ng aplikasyon (maliwanag, basura, pagpindot, error):
instance
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
Klase CSS
ng-model Ang iminungkahi ay nagbibigay ng klase CSS ayon sa estado ng elemento HTML:
instance
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Magbigay ng iyong pangalan:
<input name="myName" ng-model="myText" required>
</form>
ng-model Ang mga directive ay nagdagdag o nagbubuwag ng mga klase na ila sa mga estado ng field ng form:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
- Nakaraang Pahina Directives ngAngularJS
- Susunod na Pahina Data Binding ngAngularJS
