数据绑定指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',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',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',function($scope) { $scope.firstname = "John"; $scope.lastname = "Doe"; }); </script>