标签：
AngularJS学习2
1.filter过滤
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <script src="~/Scripts/angular.js"></script> 11 <title>Test3</title> 12 </head> 13 <body> 14 <div ng-app=""> 15 <div> 输入：<input type="text" ng-model="name" /></div> 16 <p>结果：{{name|uppercase}}</p> 17 </div> 18 </body> 19 </html>
2.filter对数组过滤
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <script src="~/Scripts/angular.js"></script> 11 <title>Test4</title> 12 </head> 13 <body> 14 <div ng-app="" ng-init="family=[ 15 {name:‘FatDu‘,age:21}, 16 {name:‘SmartPan‘,age:49}, 17 {name:‘OldDu‘,age:50}, 18 {name:‘Ando‘,age:24} 19 ]"> 20 <p>过滤一下：<input type="text" ng-model="name" /></p> 21 <ul style="list-style-type: none"> 22 <li>姓名，年龄</li> 23 <li ng-repeat="x in family | filter:name"> 24 {{x.name+‘,‘+x.age}} 25 </li> 26 </ul> 27 </div> 28 </body> 29 </html>
3.ng-repete
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Test1</title> 11 <script src="~/Scripts/angular.js"></script> 12 </head> 13 <body> 14 <div ng-app="" ng-init="friends=[ 15 {name:‘Du‘,age:25}, 16 {name:‘Ando‘,age:24}, 17 {name:‘Pan‘,age:49} ]"> 18 <table> 19 <tr ng-repeat="x in friends"> 20 <td>{{‘名称:‘+x.name+‘,年龄:‘+x.age}}</td> 21 </tr> 22 </table> 23 </div> 24 </body> 25 </html>
4.如何在声明式模板中显示数据？
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <script src="~/Scripts/angular.js"></script> 11 <title>Test5</title> 12 13 <script type="text/javascript"> 14 var du = { 15 name: "Ando", 16 gender: "male", 17 age: 24 18 }; 19 //此处的module(dumodule)与指令(duDir)与下面html里的内容相对应。 20 angular.module("dumodule", []).directive(‘duDir‘, function () { 21 return { 22 restrict: "E",//element 23 template: "<div></div>", 24 replace: true,//可以将html里的指令块（du-dir）替换成template. 25 link: function (scope, element, attrs) { 26 //可通过attrs.data拿到定义的值。 27 debugger; 28 var du = eval(attrs.data);//如果没有eval则只会拿到字符串“window.du”，下面的姓名等都会是undefined. 29 element.append("<div>姓名:" + du.name + "</div>").append("<div>姓别:" + du.gender + "</div>").append("<div>年龄:" + du.age + "</div>"); 30 } 31 }; 32 }); 33 </script> 34 </head> 35 36 <!--这里的module与指令与上面的对应--> 37 <body ng-app="dumodule"> 38 <du-dir data="window.du"></du-dir> 39 </body> 40 </html>
标签：
原文地址：http://www.cnblogs.com/anmutu/p/4760990.html
