<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> .active1{ background:red;} .active2{ background:blue;} </style> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.dataList = [ 'aaaaa' , 'bbbbb' , 'cccccc' , 'dddddd' , 'eeeeee' ]; }]); </script> </head> <body> <div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa"> //checkbox选中则aaa为true <select> <option>11111</option> <option ng-selected="aaa">22222</option> //下拉选择框是否选择取决于aaa变量 </select> //输入框变化就会出发输入框的值为hello <input type="text" ng-change="bbb='hello'" ng-model="bbb">{{bbb}}<br> //ng-paste="ccc=true"当输入框复制操作时时ccc=true， <input type="text" value="aasdassssssss" ng-paste="ccc=true">{{ccc}} </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$interval',function($scope,$interval){ var iNow = 5; $scope.text = iNow+'秒'; $scope.isDisabled = true; //setInterval -> $scope.$apply() //$timeout $interval var timer = $interval(function(){ iNow--; $scope.text = iNow+'秒'; if(iNow == 0){ $interval.cancel(timer); $scope.text = '可以点击啦'; $scope.isDisabled = false; } },1000); }]); </script> </head> <body> <div ng-controller="Aaa"> //ng-disabled="isDisabled",isDisabled是变量名 <input type="button" ng-value="text" ng-disabled="isDisabled"> <input type="text" value="{{text}}" ng-readonly="isDisabled"> <input type="checkbox" value="{{text}}" ng-checked="isDisabled"> </div> <script> alert(1); </script> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> //引入插件，ngSanitize模块 <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular-sanitize.min.js"></script> <script> var m1 = angular.module('myApp',['ngSanitize']); //['ngSanitize']是引入ngSanitize模块 m1.controller('Aaa',['$scope',function($scope){ $scope.text = '<h1>hello</h1>'; }]); </script> </head> <body> <div ng-controller="Aaa"> <div ng-bind="text"></div> //跟ng-value和写表达式是一样的 <div ng-bind-template="{{text}},{{text}}"></div> //ng-bind-template用于写多个表达式 <div ng-bind-html="text"></div> //解析html内容，要引入ngSanitize模块 <div ng-cloak>{{text}}</div> //ng-cloak用于没有解析完毕时不显示解析完毕后解析，用户体验好。 <div ng-non-bindable>{{text}}</div> //原样输出，不进行解析。 </div> <script> alert(1); //阻止后面的js的执行 </script> </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.style = "{color:'red',background:'yellow'}"; $scope.sClass = "{red:true,yellow:true}"; $scope.url = "http://www.baidu.com"; }]); </script> </head> <body> <div ng-controller="Aaa"> <div ng-class="{red:true}">{{text}}</div> //激活red样式 <div ng-class="{red:true,yellow:true}">{{text}}</div> //激活red和yellow样式 <div ng-class="{{sClass}}">{{text}}</div> <div ng-style="{color:'red',background:'yellow'}">{{text}}</div> <div ng-style="{{style}}">{{text}}</div> <a ng-href="{{url}}">aaaaaaa</a> <a ng-attr-href="{{url}}" ng-attr-title="{{text}}" ng-attr-class="" ng-attr-style="">aaaaaaa</a> </div> <script> alert(1); //阻止后面js的执行 </script> </body> </html>