AngularJS学习2

                                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>



 






            

            
posted @ 
2015-08-26 17:38 
公子若不胖天下谁胖 
阅读(178) 
评论(0) 
 
收藏 
举报