标签:
<!doctype html> <html ng-app=""> <!-- ng-app指令标记了AngularJS脚本的作用域 --> <head> <meta charset=‘utf-8‘> <title>angular js</title> <script type="text/javascript" src=‘http://www.runoob.com/try/angularjs/1.2.5/angular.min.js‘></script> </head> <body> <div> your name : <input type=‘text‘ ng-model="yourname" ng-init="yourname=‘‘word"> <br/> <!-- ng-model 指令把元素值(比如输入域的值)绑定到应用程序 --> <!-- ng-init 初始化变量值 --> hello {{yourname}} ! <!-- {{}} 绑定表达式 --> <br/> helllo <span ng-bind="yourname"></span> <br> <!-- ng-bind绑定表达式,类似于{{}}--> <!-- 添加过滤器 --> hello {{yourname|uppercase}} <br> <!-- 大写 --> hello {{yourname|lowercase}} <br> <!-- 小写 --> hello {{yourname|currency}} <br> <!-- 转化为货币形式 --> <!-- orderBy 见下 --> <!-- filter:name见下 --> <p>1+2={{1+2}}</p> </div> <div ng-controller="PhoneListCtrl"> <!-- 定义控制器 --> <input ng-model=‘name‘> <ul> <li ng-repeat="phone in phones |orderBy:‘snippet‘|filter:name"> <!-- ng-repeat遍历数组 --> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> <div ng-controller=‘personcontroller‘> firstname: <input tyep=‘text‘ ng-model="person.firstname"><br> lastname: <input type=‘text‘ ng-model="person.lastname"><br> myname is {{person.firstname+" "+person.lastname}} </div> <script type="text/javascript"> function PhoneListCtrl($scope){ $scope.phones=[ {"name":"nexus s", "snippet": "Fast just got faster with Nexus S."}, {"name":"vivo x3", "snippet":"keep moving"}, {"name":"iphone6", "snippet":"make anything impossiable"} ]; } function personcontroller($scope){ $scope.person = { firstname:"JACK", lastname:"Rose" } } </script> </body> </html>
标签:
原文地址:http://www.cnblogs.com/yzg1/p/4657439.html