数据绑定指AngularJS 数据模型与HTML视图之间数据的绑定,是同步绑定.
数据模型:
AngularJS应用程序通常有一个数据模型,功能是给应用程序提供数据集合.
如:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
HTML视图:
指AngularJS应用程序所在的容器元素.
视图可以有几种方式将数据模型中的数据展示出来:
第一种:
可以直接使用ng-bind指令将HTML元素的innerHTML属性与数据模型中的某个数据绑定.
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
第二种:
使用{{}}展示数据.
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{name}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.name = "joe";
})
</script>
第三种:
使用ng-model.只限于input, textarea, select元素.
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="firstname">
<option>{{firstname}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>
AngularJS数据绑定可以是双向的.当模型中数据变化,视图会体现出变化的数据,同样,视图中数据变化,模型中数据也会得到更新.如:
<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>