AngularJS tietojen sidottu

AngularJS:n data-synkronointi on mallin ja näkymän välinen synkronointi.

Tietomalli

AngularJS-sovelluksella on yleensä tietomalli. Tietomalli on kokoelma tietoja, joita voidaan käyttää sovelluksessa.

esimerkki

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});

HTML-näkymä

HTML-kontti, jossa näytetään AngularJS-sovellus, kutsutaan näkymäksi.

Näkymä voi käyttää mallia, ja on olemassa useita tapoja näyttää mallin data näkymässä.

Voit käyttää ng-bind ohjetta, joka sitoo elementin innerHTML-ominaisuuden määritettyyn mallin ominaisuuteen:

esimerkki

<p ng-bind="firstname"></p>

Kokeile itse

Voit myös käyttää kaksinkertaisia sulkeita {{ }} näyttääksesi mallin sisällön:

esimerkki

<p>Nimi: {{firstname}}</p>

Kokeile itse

Tai voit käyttää HTML-kontrollissa ng-model Ohje sitoo mallin näkymään.

ng-model-ohjetta

Käytä ng-model Ohje sitoo mallin dataa HTML-kontrollin (input, select, textarea) näkymään.

esimerkki

<input ng-model="firstname">

Kokeile itse

ng-model Ohjeet tarjoavat mallin ja näkymän välinen kaksisuuntainen synkronointi.

Kaksisuuntainen synkronointi

AngularJS:n data-synkronointi on mallin ja näkymän välinen synkronointi.

Kun mallin data muuttuu, näkymä heijastaa tätä muutosta, ja kun näkymän data muuttuu, malli päivittyy. Tämä tapahtuu välittömästi ja automaattisesti, varmistaen, että malli ja näkymä ovat aina ajan tasalla.

esimerkki

<div ng-app="myApp" ng-controller="myCtrl">
  Nimi: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "Bill";
  $scope.lastname = "Gates";
});
</script>

Kokeile itse

AngularJS ohjaimet

AngularJS-sovellus hallitaan ohjaimella. Lue lisää ohjaimista AngularJS-ohjaimen luvusta.

Koska malli ja näkymä synkronoivat välittömästi, ohjain voi erottaa täysin näkymän ja keskittyä vain mallidataan. AngularJS:n avulla näkymä heijastaa ohjaimessa tehdyt kaikki muutokset.

esimerkki

<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.firstname = "Bill";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>

Kokeile itse