<!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> <!-- http --> <div ng-controller='customerController'> <ul> <li ng-repeat="x in names"> {{x.Name+","+x.Country}} </li> </ul> </div> <input type='checkbox' ng-model='mySwitch'>buttton <button ng-disabled='mySwitch'>TOUCH ME!</button> <p> <p ng-show='true'>我是可见的</p> <p ng-show='false'>我是不可见的</p> </p> <p> <p ng-hide='true'>我是不可见的</p> <p ng-hide='false'>我是可见的</p> </p> <!-- 事件 --> <div ng-controller="clickController"> <button ng-click="count=count+1">touch me</button> <p>{{ count }}</p> </div> <script type="text/javascript"> function PhoneListCtrl($scope){ // $scope为控制器对象，phones为控制器对象属性 $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" } } function customerController($scope,$http){ $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") //数据库文件地址 .success(function(response){ $scope.names=response; }) } function clickController($scope){ $scope.count=0; } </script> </body> </html>