W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS 数据绑定



AngularJS中的数据绑定是模型和视图之间的同步。


数据模型

AngularJS应用程序通常具有数据模型。数据模型是可用于应用程序的数据的集合。

Example

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

HTML视图

显示AngularJS应用程序的HTML容器称为视图。

该视图可以访问该模型,并且有几种在视图中显示模型数据的方法。

您可以使用 ng-bind 指令,将该元素的 innerHTML 绑定到指定的模型属性:

Example

<p ng-bind="firstname"></p>
尝试一下 »

您也可以使用双括号 {{ }} 来显示模型中的内容:

Example

<p>名字:{{firstname}}</p>
尝试一下 »

或者您可以使用HTML控件上的 ng-model 指令将模型绑定到视图。


ng-model 指令

使用 ng-model 指令将模型中的数据绑定到HTML控件上的视图(input,select,textarea)

Example

<input ng-model="firstname">
尝试一下 »

ng-model 指令提供模型和视图之间的双向绑定。


双向绑定

AngularJS中的数据绑定是模型和视图之间的同步。

模型 中的数据更改时,视图 反映了更改,并且 视图 中的数据更改时,模型 也会更新。 这种情况会立即自动发生,这样可以确保模型和视图始终更新。

Example

<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>
尝试一下 »

AngularJS 控制器

AngularJS中的应用由控制器控制。阅读 AngularJS 控制器 章节中的控制器。

由于模型和视图的直接同步,控制器可以完全与视图分离,并且仅仅集中在模型数据上。 由于AngularJS中的数据绑定,视图将反映控制器中所做的任何更改。

Example

<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>
尝试一下 »