ANGULARJS Study 2

ANGULARJS Study 2

1.filter Filtration

1 @{2Layout =NULL;3 }4 5<! DOCTYPE html>6 789<meta name="Viewport"Content="Width=device-width"/>Ten<script src="~/scripts/angular.js"></script> One<title>Test3</title> A -<body> -<div ng-app=""> the<div> Input: <input type="text"Ng-model="name"/></div> -<p> Results:{{name|uppercase}}</p> -</div> -</body> +

2.filter Logarithmic Group filtering

1 @{2Layout =NULL;3 }4 5<! DOCTYPE html>6 789<meta name="Viewport"Content="Width=device-width"/>Ten<script src="~/scripts/angular.js"></script> One<title>Test4</title> A -<body> -<div ng-app=""ng-init="family=[ the{Name:'FATDU', Age: +}, -{Name:'Smartpan', Age: the}, -{Name:'Olddu', Age: -}, -{Name:'Ando', Age: -} +]"> -<p> Filter: <input type="text"Ng-model="name"/></p> +<ul style="List-style-type:none"> A<li> name, age </li> at<li ng-repeat="x in family | Filter:name"> -{{x.name+','+X.age}} -</li> -</ul> -</div> -</body> in

3.ng-repete

1 @{2Layout =NULL;3 }4 5<! DOCTYPE html>6 789<meta name="Viewport"Content="Width=device-width"/>Ten<title>Test1</title> One<script src="~/scripts/angular.js"></script> A -<body> -<div ng-app=""ng-init="friends=[ the{Name:'Du', Age: -}, -{Name:'Ando', Age: -}, -{Name:'Pan', Age: the}  ]"> -<table> +<tr ng-repeat="x in Friends"> -<td>{{'Name:'+x.name+', Age:'+x.age}}</td> +</tr> A</table> at</div> -</body> -

4. How do I display data in a declarative template?  

1 @{2Layout =NULL;3 }4 5<! DOCTYPE html>6 789<meta name="Viewport"Content="Width=device-width"/>Ten<script src="~/scripts/angular.js"></script> One<title>Test5</title> A  -<script type="Text/javascript"> -             varDu = { theName"Ando", -Gender"male", -Age - -             }; +             //the module (dumodule) and instruction (Dudir) here correspond to the content in the following HTML.  -Angular.module ("Dumodule", []). Directive ('Dudir', function () { +                 return { ARestrict"E",//element atTemplate"<div></div>", -Replacetrue,//You can replace the instruction block (DU-DIR) in the HTML with the template. - link:function (scope, element, Attrs) { -                         //the defined value can be obtained by Attrs.data.  - Debugger; -                         varDu = eval (attrs.data);//If you do not have eval, you will only get the string "Window.du", and the name below will be undefined. inElement.append ("<div> Name:"+ Du.name +"</div>"). Append ("<div> Surname:"+ Du.gender +"</div>"). Append ("<div> Age:"+ Du.age +"</div>");  -                     } to                 }; +             }); -</script> the *  $<!--here the module and instruction correspond to the above--Panax Notoginseng<body ng-app="Dumodule"> -<du-dir Data="Window.du"></du-dir> the</body> +

ANGULARJS Study 2