1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 6 <style> 7 table, th , td { 8 border: 1px solid grey; 9 border-collapse: collapse; 10 padding: 5px; 11 } 12 table tr:nth-child(odd) { 13 background-color: #f1f1f1; 14 } 15 table tr:nth-child(even) { 16 background-color: #ffffff; 17 } 18 </style> 19 </head> 20 <body> 21 22 1.使用ng-model传值 23 <div > 24 <p>输入name : <input type="text" ng-model="name1"></p> 25 <h1>Hello {{name1}}</h1> 26 </div> 27 2.ng-init初始化 很少用 一般用 controller 28 <div ng-init="name2='John'"> 29 <p>初始化名字 <span ng-bind="name2"></span></p> 30 </div> 31 3.表达式的使用 32 <div > 33 <p>我的第一个表达式： {{ name1 + name2 }}</p> 34 </div> 35 36 <h1>AngularJS 实例</h1> 37 4.ng-init初始化一个对象 类似于jason格式 38 <div ng-init="person={firstName:'John',lastName:'Doe'}"> 39 40 <p>姓为 {{ person.lastName }}</p> 41 42 </div> 43 5.ng-init初始化一个数组 ng-repeat进行数据的遍历 44 <div ng-init="names=['A','B','C']"> 45 <ul><li ng-repeat="x in names">{{x}}</li></ul> 46 </div> 47 48 49 6.定义一个控制器 js代码可外置 50 <div ng-app="myApp" ng-controller="myCtrl"> 51 52 <h1>{{carname}}</h1> 53 54 </div> 55 56 <script> 57 var app = angular.module('myApp', []); 58 app.controller('myCtrl', function($scope) { 59 $scope.carname = "Volvo"; 60 }); 61 </script> 62 63 7.controller受 ng-model影响 64 <div ng-app="myApp" ng-controller="myCtrl"> 65 <input ng-model="name"/> 66 <h1>{{name}}</h1> 67 </div> 68 <script> 69 var app = angular.module('myApp',[]); 70 app.controller('myCtrl',function($scope){ 71 $scope.name="testname"; 72 }); 73 </script> 74 75 8.$rootScope 类似于全局变量 76 <div ng-app="myApp" ng-controller="myCtrl"> 77 <ul><li ng-repeat="x in names">{{x}}{{h}}</li></ul> 78 </div> 79 <script> 80 var a='hehe';//给 ajax 传值 提供了可能 81 var app = angular.module('myApp',[]); 82 app.controller('myCtrl',function($scope){ 83 $scope.names=['A','B','C']; 84 $scope.h=a; 85 }); 86 </script> 87 88 9.controller 控制器方法 89 <div ng-app='myApp' ng-controller='myCtrl'> 90 <h1>{{fullname()}}</h1> 91 </div> 92 <script> 93 var app = angular.module('myApp',[]); 94 app.controller('myCtrl',function($scope){ 95 $scope.aname='A'; 96 $scope.bname='B'; 97 $scope.fullname=function(){ 98 return $scope.aname+' '+$scope.bname; 99 } 100 }); 101 </script> 102 103 10.controller升级版 104 <div ng-app='myApp' ng-controller='myCtrl'> 105 <ul><li ng-repeat='x in names'>{{x}}</li></ul> 106 </div> 107 <script> 108 angular.module('myApp',[]).controller('myCtrl',function($scope){ 109 $scope.names=['A','B','C']; 110 }); 111 </script> 112 113 11.过滤器uppercase大写 lowercase 格式化字符串为小写 114 <div ng-app='myApp' ng-init='name="aaa"'> 115 {{name | currency}} 116 </div> 117 <script> 118 angular.module('myApp',[]); 119 </script> 120 121 12. currency 格式化数字为货币格式 122 <div ng-app='myApp' ng-init='name="aaa"'> 123 数量：<input type='number' ng-model='quantity'> 124 单价：<input type='number' ng-model='price'> 125 <p>总价：{{quantity*price | currency}}</p> 126 </div> 127 <script> 128 angular.module('myApp',[]); 129 </script> 130 131 13.orderBy 过滤器根据表达式排列数组 132 <div ng-app='myApp' ng-controller='myCtrl'> 133 <ul><li ng-repeat='x in names | orderBy : "num"'>{{x.num}} {{x.name}}</li></ul> 134 </div> 135 <script> 136 angular.module('myApp',[]).controller('myCtrl',function($scope){ 137 $scope.names=[{num:2,name:'B'},{num:3,name:'C'},{num:1,name:'A'}]; 138 }); 139 </script> 140 141 14.服务 $location.absUrl() 返回当前页面的 URL 地址 142 <div ng-app='myApp' ng-controller='myCtrl'> 143 {{url}} 144 </div> 145 <script> 146 angular.module('myApp',[]).controller('myCtrl',function($scope,$location){ 147 $scope.url=$location.absUrl(); 148 }); 149 </script> 150 151 15.$http 服务 152 <div ng-app='myApp' ng-controller='myCtrl'> 153 {{mydata}} 154 </div> 155 <script> 156 var app = angular.module('myApp', []); 157 app.controller('myCtrl', function($scope, $http) { 158 $http.get("syscfg/workermsg.action?fn=angular").then(function (response) { 159 $scope.mydata = response.data; 160 }); 161 }); 162 163 </script> 164 165 16.$timeout 服务 定时器 166 <div ng-app='myApp' ng-controller='myCtrl'> 167 {{myHeader}} 168 </div> 169 <script> 170 var app = angular.module('myApp', []); 171 app.controller('myCtrl', function($scope, $timeout) { 172 $scope.myHeader = "Hello World!"; 173 $timeout(function () { 174 $scope.myHeader = "How are you today?"; 175 }, 2000); 176 }); 177 178 </script> 179 180 17.$interval 服务 间隔重复执行 心跳器 181 <div ng-app='myApp' ng-controller='myCtrl'> 182 {{theTime}} 183 </div> 184 <script> 185 var app = angular.module('myApp', []); 186 app.controller('myCtrl', function($scope, $interval) { 187 $scope.theTime = new Date().toLocaleTimeString(); 188 $interval(function () { 189 $scope.theTime = new Date().toLocaleTimeString(); 190 }, 1000); 191 }); 192 193 </script> 194 195 18.创建自定义服务 196 <div ng-app='myApp' ng-controller='myCtrl'> 197 {{hex}} 198 </div> 199 <script> 200 var app = angular.module('myApp', []); 201 app.service('hexafy', function() { 202 this.myFunc = function (x) { 203 return x.toString(16); 204 } 205 }); 206 app.controller('myCtrl', function($scope, hexafy) { 207 $scope.hex = hexafy.myFunc(255); 208 }); 209 210 </script> 211 212 213 19.过滤器中，使用自定义服务 214 <div ng-app="myApp"> 215 <input type='number'ng-init='num=0' ng-model='num'/> 216 <h1>{{num | myFormat}}</h1> 217 </div> 218 <script> 219 var app = angular.module('myApp', []); 220 app.service('hexafy', function() { 221 this.myFunc = function (x) { 222 return x.toString(16); 223 } 224 }); 225 app.filter('myFormat',['hexafy', function(hexafy) { 226 return function(x) { 227 return hexafy.myFunc(x); 228 }; 229 }]); 230 231 </script> 232 233 20.AngularJS $http 存在跨域问题无法请求 需放置本地文件 234 <div ng-app='app' ng-controller='ctrl'> 235 <ul><li ng-repeat='x in names'>{{x.Name+','+x.Country+','+x.City}}</li></ul> 236 </div> 237 <script> 238 angular.module('app',[]).controller('ctrl',function($scope,$http){ 239 $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") 240 .success(function(response){$scope.names = response.records;}); 241 }); 242 </script> 243 244 21.下拉框select 245 <div ng-app="myApp" ng-controller="myCtrl"> 246 247 248 <select ng-model="selectedSite" ng-options="x.site for x in sites"> 249 </select> 250 <p><a href="{{selectedSite.url}}">{{selectedSite.site}}</a></p> 251 252 </div> 253 254 <script> 255 var app = angular.module('myApp', []); 256 app.controller('myCtrl', function($scope) { 257 $scope.sites = [ 258 {site : "Google", url : "http://www.google.com"}, 259 {site : "Runoob", url : "http://www.runoob.com"}, 260 {site : "Taobao", url : "http://www.taobao.com"} 261 ]; 262 }); 263 </script> 264 265 22.表格 css 参考在头部 利用oderBy排序 $index+1显示排序 266 <div ng-app="myApp" ng-controller="myCtrl" > 267 <table > 268 <tr ng-repeat='x in sites | orderBy : "num"'> 269 <td>{{$index+1}}</td> 270 <td>{{x.site}}</td> 271 <td>{{x.url}}</td> 272 </tr> 273 </table> 274 275 </div> 276 277 <script> 278 var app = angular.module('myApp', []); 279 app.controller('myCtrl', function($scope) { 280 $scope.sites = [ 281 {num:3,site : "Google", url : "http://www.google.com"}, 282 {num:1,site : "Runoob", url : "http://www.runoob.com"}, 283 {num:2,site : "Taobao", url : "http://www.taobao.com"} 284 ]; 285 }); 286 </script> 287 288 289 </body> 290 291 </html>