10分钟学会AngularJS的数据绑定
前言：为什么要用AngularJS？ 相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情，C#代码直接在前台页面中输出。然后这种比较适用于同步请求。 当我们的项目离不开异步请求绑定数据的时候，AngularJS的强大就能感受出来了！ 下面大家就花十分钟的时间了解一下AngularJS的数据绑定吧！Let‘s go
一、 AngularJS脚本引用
就跟我们平常引用一个jquery一样
二、 ng-App配置
什么是ng-App，官方文档的解释是这样的The ng-appdirective tells AngularJS that the <div> element is the "owner" of an AngularJS application. 就是说加了这句以后代表AngularJs应用程序加载了这个页面
三、 ng-controller配置！
ng-controller就是用来做页面渲染的一个控制器
四、 ng-repeater【数据绑定利器！】
<!DOCTYPE html> <html> <head> <script src='javascripts/jquery-1.11.3.min.js' type="text/javascript"></script> <script src='javascripts/angular.js' type="text/javascript"></script> </head> <script> var mainApp = angular.module('mainApp', []); mainApp.controller('studentController',function($scope){ $scope.student=null; //这边定义一个json的对象 $scope.student=[{'name':'王小明',"age":"22"},{'name':'李小刚',"age":"30"}]; }); </script> <body ng-app="mainApp"> <h1><%= title %></h1> <div ng-controller="studentController"> <!--遍历对象--> <div ng-repeat="item in student"> <h1 ng-bind="item.name"></h1> <p ng-bind="item.age"></p> </div> </div> </body> </html> 五、 结果
六 总结
到现在为止你已经掌握angularjs基本的数据绑定，他还有更多强大的功能，后续再为大家一一道来
本文由用户 jopen 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
转载本站原创文章，请注明出处，并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台，欢迎各类分享！