<!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/Angular.js"></script> <script> //控制器注册 var myapp=angular.module("myapp", []).controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); </script> </head> <body > 学习地址<br/> http://www.yiibai.com/angularjs/angularjs_environment.html<br/> http://docs.angularjs.cn/api/ng/filter/filter <span>指令集合</span> ng-app：设定作用域<br/> ng-model：设定模型变量<br/> ng-controller:设置某个控制器的作用域<br/> ng-bind：绑定模型<br/> ng-init：该指令初始化应用程序数据。<br/> ng-repeat：该指令将重复集合中的每个项目的HTML元素。用于迭代<br/> <p style="color:red;">注意点：angular.module("myapp", [])这样的注册只能有一次，其他地方使用会报错</p> ng-disabled:禁用一个给定的控制<br/> ng-show:显示一个给定的控制<br/> ng-hide:隐藏在给定的控制<br/> ng-click:表示AngularJS click事件<br/> <br/> <span>作用域对象</span> $scope：标示控制器的作用域 <br/> <span>模型一</span><br/> Hello {{'World'}} {{123}}! <br/> <br/> <span>模型二</span><br/> Your name: <input type="text" ng-model="yourname" placeholder="World"> Hello {{yourname || 'World'}}! <br/> <br/> <span>模型三</span><br/> <table> <tr> <th>row number</th> </tr> <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td>{{i}}</td> </tr> </table> <table> <tr> <th>row number</th> </tr> <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"> <td>{{i+1}}</td> </tr> </table> <br/> <br/> <span>模型四</span><br/> <div ng-controller="HelloController" > <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2> <br/> <br/> </div> <span>模型五</span><br/> <p>我的名字: <input type="text" ng-model="name"> </p> <p>Hello, <span ng-bind="name"></span>!</p> <br/> <br/> <span>模型六</span><br/> <div ng-app="myapp01" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]"> {{countries}} <br/> {{countries[0].name}} </div> <br/> <br/> <span>模型七</span><br/> <script> //自定义注册过滤器 myapp.filter('kavlezFilter',function(){ return function(input){ if(input){ return '1111:"'+input+'"'; } } }); </script> <input type="text" ng-model="student.firstName"><br/> 大写过滤: {{student.firstName | uppercase}}<br/> 小写过滤: {{student.firstName | lowercase}}<br/> 货币过滤: {{student.firstName | currency}}<br/> 自定义过滤: {{student.firstName | kavlezFilter}}<br/> 排序过滤:<br/> <ul ng-repeat="i in [{name:'b'}, {name:'ab'}, {name:'a'}, {name:'bs'}]|orderBy:'name'"> <li>{{i.name}}</li> </ul> <br/> <br/> <span>模型八</span><br/> <input type="checkbox" ng-model="enableDisableButton">Disable Button <input type="radio" ng-model="enableDisableButton">Disable Button <button ng-disabled="enableDisableButton">Click Me!</button> <br/> <input type="checkbox" ng-model="showHide1">Show Button <button ng-show="showHide1">Click Me!</button> <br/> <input type="checkbox" ng-model="showHide2">Hide Button <button ng-hide="showHide2">Click Me!</button> <br/> <div ng-controller="TestController"> <p>Total click: {{ clickCounter }}</p></td> <button ng-click="clickCounter = clickCounter + 1">Click Me!</button> <button ng-click="clickTest()">Click Me!</button> </div> <script> myapp.controller("TestController", function($scope) { $scope.clickTest = function(){ $scope.clickCounter = $scope.clickCounter + 1; }; }); </script> 支持事件<br/> ng-click<br/> ng-dbl-click<br/> ng-mousedown<br/> ng-mouseup<br/> ng-mouseenter<br/> ng-mouseleave<br/> ng-mousemove<br/> ng-mouseover<br/> ng-keydown<br/> ng-keyup<br/> ng-keypress<br/> ng-change<br/> </body> </html>