obligatoriu în AngularJS de date este sincronizarea dintre model și vizualizarea.
Modelul de date
AngularJS aplicații au de obicei un model de date. Modelul de date este o colecție de date disponibile pentru aplicație.
Exemplu
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
HTML View
Containerul HTML în cazul în care se afișează aplicația AngularJS, se numește punctul de vedere.
Vederea are acces la modelul, și există mai multe moduri de afișare a datelor modelului în vizualizarea.
Puteți utiliza ng-bind directivă, care va lega innerHTML elementului la modelul de proprietate specificat:
Puteți utiliza , de asemenea acolade duble {{ }} {{ }} {{ }} Pentru a afișa conținut din modelul:
Sau puteți utiliza ng-model de directiva privind HTML controale pentru a lega modelul la vizualizarea.
ng-model directivă
Utilizați ng-model directivă pentru a lega datele din modelul la vizualizarea privind controalele HTML (input, select, textarea) de (input, select, textarea)
ng-model directivă prevede o legare între model și vizualizarea cu două sensuri.
Două căi Binding
obligatoriu în AngularJS de date este sincronizarea dintre model și vizualizarea.
Când datele din modelul se schimbă punctul de vedere reflectă modificarea și atunci când datele în vedere modificările, modelul este actualizat. Acest lucru se întâmplă imediat și în mod automat, ceea ce face sigur că modelul și vizualizarea este actualizat în orice moment.
Exemplu
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
var app = angular. module('myApp', []) ;
app. controller('myCtrl', function($scope) {
$scope.firstname
= "John";
$scope.lastname = "Doe";
});
</script>
Încearcă - l singur » AngularJS Controler
Aplicații în AngularJS sunt controlate de controlere. Citiți despre controlere în AngularJS Controllers capitolul.
Din cauza sincronizarea imediată a modelului și vizualizarea, controlerul poate fi complet separat de punctul de vedere, și pur și simplu se concentrează asupra datelor modelului. Datorită legare în AngularJS datele, ecranul va reflecta toate modificările făcute în controler.
Exemplu
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-click="changeName()">{{firstname}}</h1>
</div>
<script>
var app = angular. module('myApp', []) ;
app. controller('myCtrl', function($scope) {
$scope.changeName
= function() {
$scope.firstname
= "Nelly";
}
});
</script>
Încearcă - l singur »