<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.bBtn = true; }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="checkbox" ng-model="bBtn"> //是否选中，不选中会改变bBtn的值会改变下面的隐藏显示。 <div ng-show="bBtn">aaaaaaaaaaaa</div> //隐藏显示，占布局。 <div ng-if="bBtn">aaaaaaaaaaaa</div> //隐藏显示，不占布局。 <div ng-switch on="bBtn"> //切换 <p ng-switch-default>默认的效果</p> <p ng-switch-when="false">切换的效果</p> </div> <details ng-open="bBtn"> //details是描述性的标签 <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text = 'hello'; $scope.arr = [['a','b'],['c','d']]; }]); </script> </head> <body> <div ng-controller="Aaa" ng-init="text='hello'"> {{ text }} </div> <div ng-controller="Aaa"> <div ng-repeat="arrOuter in arr" ng-init="outerIndex = $index"> //遍历时输出索引 <div ng-repeat="arrInner in arrOuter" ng-init="innerIndex = $index"> //遍历时输出索引 <p>{{arrInner}}:{{outerIndex}}{{innerIndex}}</p> </div> </div> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.arr = [['a','b'],['c','d']]; }]); </script> </head> <body> <div ng-controller="Aaa" ng-include="'temp.html'"> 包含其余页面 </div> </body> </html> temp.html： <ul> <li>111111</li> <li>222222</li> <li>333333</li> </ul>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.text = 'hello'; }]); //面向对象的写法（在原型上扩展）防止写的太多。 var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',FnAaa]); function FnAaa($scope){//构造函数也可以看成是对象 } FnAaa.prototype.num = '123'; //给对象添加属性 FnAaa.prototype.text = 'hello'; FnAaa.prototype.show = function(){ return 'angularJS'; }; </script> </head> <body> <div ng-controller="Aaa"> //ng-model="text"当输入框输入值的时候text变量会改变从而触发其余地方也改变，ng-model-options是说只有在光标移除输入框时才改变text变量的值。 <input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}"> <div>{{text}}</div> </div> <div ng-controller="FnAaa as a1"> //as是创建了一个对象。 <div>{{a1.text}}:{{a1.show()}}</div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.colors = [ { name : 'red' }, { name : 'yellow' }, { name : 'blue' } ]; }]); </script> </head> <body> //ng-app="myApp"指定anguarjs解析的范围， <div ng-app="myApp" ng-controller="Aaa"> <a href="">{{myColor.name}}</a> //下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。 <select ng-options=" color.name for color in colors " ng-model="myColor"> </select> <form novalidate> <input type="email"> </form> </div> <a href="">bbbbbbb</a> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .red{ background:red;} .yellow{ background:yellow;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.colors = [ { name : 'red' }, { name : 'yellow' }, { name : 'blue' } ]; }]); </script> </head> <body> //ng-app="myApp"指定anguarjs解析的范围， <div ng-app="myApp" ng-controller="Aaa"> <a href="">{{myColor.name}}</a> //下拉菜单，ng-model="myColor"是选择之后的值给myColor，改变myColor会引起上面的值也改变（变量在一处变化整个页面都变化）。 <select ng-options=" color.name for color in colors " ng-model="myColor"> </select> <form novalidate> <input type="email"> </form> </div> <a href="">bbbbbbb</a> </body> </html>