AngularJS数据绑定
发布时间:2020-12-17 10:33:36 所属栏目:安全 来源:网络整理
导读:数据绑定指AngularJS 数据模型与HTML视图之间数据的绑定,是同步绑定. 数据模型: AngularJS应用程序通常有一个数据模型,功能是给应用程序提供数据集合. 如: var app = angular.module('myApp',[]);app.controller('myCtrl',function($scope) { $scope.f
数据绑定指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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |