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>
时间： 2024-10-16 20:47:46