En son web geliştirme öğreticiler
 

AngularJS Bağlanma verileri


Angularjs bağlama veri modeli ve görünümü arasında senkronizasyon.


Veri örneği

uygulamalar genellikle veri modeli var angularjs. veri modeli uygulaması için mevcut veriler topluluğudur.

Örnek

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

HTML Görünümü

Angularjs uygulama görüntülenir HTML konteyneri, görüntüleme denir.

görünümü modeline erişimi olan ve görünümde modeli verilerin görüntülenmesi çeşitli yolları vardır.

Sen kullanabilirsiniz ng-bind belirtilen modelin özelliğine elemanın innerHTML bağlayacaktır yönergesini:

Örnek

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

Ayrıca çift parantez kullanabilirsiniz {{ }} {{ }} {{ }} Modelinden içeriğini görüntülemek için:

Örnek

<p>First name: {{firstname}}</p>
Kendin dene "

Yoksa kullanabilirsiniz ng-model HTML direktif görünümüne modeli bağlamak kontrol eder.


ng-model Direktifi

Kullanım ng-model HTML denetimlere görünüme modelinden veri bağlamak için yönergesi (input, select, textarea)

Örnek

<input ng-model="firstname">
Kendin dene "

ng-model yönergesi modeli ve görünümü arasında bir bağlanma iki-yol sağlar.


Cilt İki yönlü

Angularjs bağlama veri modeli ve görünümü arasında senkronizasyon.

Model değişiklikleri veri, görünüm değişimi yansıtır zaman ve görünümü değişiklikleri veri modeli de güncellendiğinde. Bu model ve görünümü her zaman güncellenir emin olur ki, hemen ve otomatik olarak gerçekleşir.

Örnek

<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>
Kendin dene "

angularjs Kontrolörü

Angularjs uygulamalar kontrolörleri tarafından kontrol edilir. Içinde kontrolörleri hakkında okuyun angularjs Kontrolörler bölüm.

Çünkü modeli ve bakış hemen senkronizasyon, kontrol görünümünden tamamen ayrılmış olabilir, ve sadece örnek veri konsantre. Angularjs bağlanma verilere sayesinde görünümü denetleyicisi yapılan değişiklikleri yansıtır.

Örnek

<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>
Kendin dene "