AngularJS实用入门
来源：互联网 发布：西安软件新城公租房 编辑：程序博客网 时间：2024/05/15 02:40
1、隔行换色
<!DOCTYPE html><html ng-app="my_app"><head> <meta charset="UTF-8"> <meta name="author" content="" /> <meta name="copyright" content="" /> <title>隔行换色</title><style>.white{background:white;}.ccc {background: #ccc;}</style><script src="angular.js" type="text/javascript"></script><script type="text/javascript"> var app=angular.module('my_app', []); app.controller('test',function($scope){ $scope.arr=[12,5,8,9,10,6,1,2]; });</script></head><body ng-controller="test"> <ul> <li ng-repeat="i in arr" ng-class="{white: $index%2==0, ccc:$index%2==1}">{{i}}</li> </ul></body></html>2、单选框
<!DOCTYPE html><html ng-app="my_app"><head> <meta charset="UTF-8"> <title>单选框</title><style>#div1 {width:300px; height:300px; border:1px solid black;}.box {background:red;}.box2 {background:green;}.box3 {background:yellow;}</style><script src="angular.js"></script><script type="text/javascript"> //定义模块 var app = angular.module('my_app',[]); //创建控制器 app.controller('test',function($scope){ });</script></head><body ng-controller="test"> <input type="checkbox" ng-model="a" /> <input type="checkbox" ng-model="b" /> <input type="checkbox" ng-model="c" /> <div id="div1" ng-class="{box: a, box2: b, box3: c}"></div></body></html>3、控制器
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>控制器</title><script src="angular.js"></script><script>//定义模块var app = angular.module('test',[]);//定义控制器app.controller('aaa',function($scope){ $scope.name='blue';});</script></head><body> <p ng-controller="aaa"> 我的名字:{{name}} </p></body></html>4、控制器继承
<!DOCTYPE html><html ng-app="aaa"><head> <meta charset="UTF-8"> <title>controller继承</title><script src="angular.js"></script><script type="text/javascript">//定义模块var app=angular.module('aaa',[]);app.controller('parent',function($scope){ $scope.a=12;});app.controller('child',function($scope){ alert($scope.a);})</script></head><body> <div ng-controller="parent"> <div ng-controller="child"></div> </div></body></html>5、遍历循环
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>遍历循环</title><script src="angular.js" type="text/javascript"></script><script type="text/javascript">//定义模块var app=angular.module('test',[]);//定义控制器app.controller('aaa',function($scope){ $scope.arr=[12,5,8];});//model 模型-数据//module 模块</script></head><body><ul ng-controller="aaa"> <li ng-repeat="i in arr">{{i}}</li></ul></body></html>6、遍历循环并推入数组
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>遍历数组并推入元素</title><script src="angular.js" type="text/javascript"></script><script type="text/javascript">var app = angular.module('test',[]);app.controller('aaa',function($scope){ $scope.arr=[12,5,8];});</script></head><body ng-controller="aaa"><input type="button" value="按钮" ng-click="arr.push(99);"> <ul> <li ng-repeat="i in arr">{{i}}</li> </ul> </body></html>7、遍历数组累加自删除
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>遍历数组修改删除</title><script src="angular.js"></script><script type="text/javascript"> var app = angular.module('test',[]); app.controller('aaa',function($scope){ var arr=[12,5,8,7,99,16]; $scope.arr=arr; $scope.a=12; //ng函数 $scope.remove=function(index){ arr.splice(index,1); } })</script></head><body ng-controller="aaa"><input type="button" value="ng修改" ng-click="a=a+1" />{{a}}<ul> <li ng-repeat="i in arr">{{i}}<a href="javascript:;" ng-click="remove($index)">删除{{$index}}</a></li></ul></body></html>8、遍历
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script><script type="text/javascript"> var app = angular.module('test',[]); app.controller('aaa',function($scope){ $scope.arr=[12,5,8,7,99,16]; });</script></head><body ng-controller="aaa"> <ul> <li ng-repeat="i in arr">{{i}}</li> </ul></body></html>9、遍历数组套json
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>遍历数组套json</title><script src="angular.js"></script><script type="text/javascript"> var app=angular.module('test',[]); app.controller('aaa',function($scope){ $scope.arr=[ {name: 'blue',age: 18}, {name: '老肖',age: 16}, {name:'张三',age:25}, {name:'张三',age:25} ]; });</script></head><body ng-controller="aaa"><ul> <li ng-repeat="item in arr">我叫{{item.name}},今年{{item.age}}</li></ul></body></html>10、执行
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title></title><script src="angular.js" type="text/javascript"></script><script type="text/javascript">//定义模块 var app=angular.module('test',[]);//控制器app.controller('aaa',function($scope){ $scope.a=12; $scope.b=0; //谁，执行 $scope.$watch('a',function(){ $scope.b = $scope.a*2; })})</script></head><body ng-controller="aaa"> <input type="text" ng-model="a"> {{b}}</body></html>11、执行
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title></title><style></style><script src="angular.js" type="text/javascript"></script><script type="text/javascript"> // 定义模块 var app=angular.module('test',[]); //控制器 app.controller('aaa',function($scope){ $scope.a=12; $scope.b=5; //谁,执行 $scope.$watch('a+b',function(){ alert('变了'); }); });</script></head><body ng-controller="aaa"> <input type="text" ng-model="a"> <input type="text" ng-model="b"></body></html>12、执行
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>执行</title><script src="angular.js"></script><script>var app = angular.module('test',[]);app.controller('aaa',function($scope){ $scope.arr=[12,5,8]; //谁,执行 $scope.$watch('arr',function(){ alert('变了'); },true); $scope.sum=function(){ var r =0; for(var i=0;i<$scope.arr.length;i++){ r+=$scope.arr[i]; } return r; } $scope.alert=function(str){ alert(str); };});</script></head><body ng-controller="aaa"> <input type="number" ng-repeat="i in arr" ng-model="arr[$index]"/> {{sum()}} <input type="button" value="看看" ng-click="alert(arr)" /></body></html>13、执行
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>累加</title><script src="angular.js"></script><script>var app = angular.module('test',[]);app.controller('aaa',function($scope){ $scope.json={a:12,b:5,c:8}; $scope.sum=function(){ var r = 0; for(var i in $scope.json){ r+=$scope.json[i]; } return r; };});</script></head><body ng-controller="aaa"> <input type="number" ng-repeat="i in json" value="{{$index}}" /> {{sum()}}</body></html>14、执行
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>执行</title><script src="angular.js"></script><script>var app = angular.module('test',[]);app.controller('aaa',function($scope){ $scope.json={a:12,b:5,c:8}; $scope.$watch('json',function(){ alert('a'); },true);});</script></head><body ng-controller="aaa"> <input type="button" value="按钮" ng-click="json.a = json.a+1" /></body></html>15、单选框与布尔值
<!DOCTYPE html><html ng-app=""><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script></head><body> <p> <input type="checkbox" ng-model="aaa" /><br> {{aaa}} </p></body></html>16、布尔值运用，显示于隐藏
<!DOCTYPE html><html ng-app=""><head> <meta charset="UTF-8"> <title></title><style>#div1 {width:100px; height:200px; background:#CCC;}</style><script src="angular.js"></script></head><body> <input type="checkbox" ng-model="aaa" /><br> <div id="div1" ng-show="aaa"></div></body></html>17、下拉列表
<!DOCTYPE html><html ng-app=""><head> <meta charset="UTF-8"> <title></title></head><script src="angular.js"></script><body> <p> <select ng-model="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">武汉</option> </select> 城市:{{city}} </p></body></html>18、点击累加
<!DOCTYPE html><html ng-app=""><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script></head><body ng-init="a=12;"><input type="button" value="aaa" ng-click="a=a+1" />{{a}}</body></html>19、关于model
<!DOCTYPE html><html ng-app=""><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script></head><body ng-init="a=12;"> <input type="text" ng-model="a" /> <input type="text" value="{{a}}" />{{a}}</body></html>20、计算
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>模板、技术</title><script src="angular.js"></script><script>var app=angular.module('test',[]);app.controller('aaa',function($scope){ $scope.a=12; $scope.b=5; $scope.sum=function(){ return $scope.a+$scope.b; }})</script></head><body ng-controller="aaa"> <input type="number" ng-model="a" /> <input type="number" ng-model="b" />{{a}}、{{b}}、{{a*b}}<br>{{sum()}}</body></html>21、过滤器、控制器、遍历
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title>模板</title><script src="angular.js"></script><script>var app=angular.module('test', []);app.filter('time2date', function (){ function toDou(n) { return n<10?'0'+n:''+n; } return function (input){ var oDate=new Date(); oDate.setTime(input*1000); return oDate.getFullYear()+'年'+toDou(oDate.getMonth()+1)+'月'+toDou(oDate.getDate())+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds()); };});app.filter('toDou', function (){ return function (input){ return Number(input).toFixed(2); };});app.filter('rmb', function (){ return function (input){ //alert(input); return '￥'+input; };});app.controller('aaa', function ($scope){ $scope.arr=[ {name: 'xxx鞋', price: 12.8, time: 1429931918}, {name: 'xxx衣服', price: 250, time: 1429930918}, {name: 'xxx帽子', price: 25.6, time: 1429921918}, ];});</script></head><body ng-controller="aaa"><ul> <li ng-repeat="item in arr"> <h2>{{item.name}}</h2> 单价：{{item.price|toDou|rmb}}， 上架时间：{{item.time|time2date}} </li></ul></body></html>22、数量与总价
<!DOCTYPE html><html ng-app="test"><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script><script type="text/javascript">var app=angular.module('test',[]);app.controller('aaa',function($scope){ $scope.arr=[ {name:'xxx鞋',price:12.8,count:1}, {name:'xxx衣服',price:250,count:2}, {name:'xxx帽子',price:25.6,count:8}, ];$scope.total=function(){ var result=0; for(var i=0;i<$scope.arr.length;i++){ result+=$scope.arr[i].price*$scope.arr[i].count; } return result;}});</script></head><body ng-controller="aaa"><ul> <li ng-repeat="item in arr"> <h2>{{item.name}}</h2> 单价:{{item.price}}<input type="number" ng-model="item.count" /><br> 总价:{{item.price*item.count}} </li></ul> 总价:{{total()}}</body></html>23、指令
<!DOCTYPE html><html ng-app="my_app"><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script><script>var app=angular.module('my_app', []);app.directive('red', function (){ return function (scope, element, attr){ //element——JQ对象 element.css('background', 'red'); };});</script></head><body><input type="text" red /><input type="text" /><input type="text" /><input type="text" /> </body></html>24、指令与隔行换色
<!DOCTYPE html><html ng-app="my_app"><head> <meta charset="UTF-8"> <title></title><script src="angular.js"></script><script src="jquery-1.7.2.js"></script><script type="text/javascript"> var app=angular.module('my_app', []); app.directive('changeColor',function(){ return function (scope, element, attr){ var arr=element.children(); for(var i=0;i<arr.length;i++) { arr[i].style.background=i%2?'#CCC':''; } }; });</script></head><body><ul change-color> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul></body></html>25、$http
<!DOCTYPE html><html ng-app="index"><head> <meta charset="UTF-8"> <title>ajax</title><script src="angular.js"></script><script src="ajax.js"></script><script>var app = angular.module("index",[]);app.controller("ajax",function($scope,$http){ $scope.arr = []; $http.get("a.txt",{params:{}}).success(function(arr){ $scope.arr = arr; }).error(function(){ alert("失败"); });});</script></head><body ng-controller="ajax"> <ul> <li ng-repeat="item in arr">{{item}}</li> </ul> </body></html> 0 0
- angularjs 入门实用
- AngularJS实用入门
- AngularJS入门
- AngularJS入门
- AngularJS 入门
- AngularJS入门
- AngularJs入门
- AngularJS入门
- AngularJS入门
- AngularJs入门
- AngularJS入门
- AngularJs入门
- AngularJS入门
- AngularJS 入门
- angularJS入门
- AngularJS入门
- angularJS入门
- AngularJS入门
- 两顺序容器中元素对比问题
- 每个程序员书柜必备的编程书籍
- 树莓派 安装Flash 教程
- ffmpeg-3.1.5视频解码代码
- bluebird.js - 让所有浏览器都支持 ES6 Promise 对象
- AngularJS实用入门
- 【软考】--白盒测试
- iOS - 获取系统相册照片名称,路径以及各项信息
- MCS-51单片机 存储器扩展的编址技术
- javaScript模块化开发库之SeaJS
- 关于Hibernate映射视图后数据查询的方法
- 投资问题
- 运维笔记14 shell强大的文本管理命令
- 区块链读书笔记一
