angularJs(1)指令篇
- angularJs模板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../angular.js"></script> </head> <body ng-app="app" ng-controller="ctr"> <script> angular.module('app',[]) .controller('ctr', function ($scope) { }) </script> </body> </html>
-
常见的指令
- ng-model
- ng-bind
- ng-bind-html
- ng-if
- ng-show
- ng-hide
- ng-reapeat
- ng-href
- ng-src
- ng-disable
- ng-checked
- ng-selected
- ng-class
- ng-style
- .. 下面介绍的是一些比较常见相对复杂一点的
- ng-reapeat
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../../angular.js"></script> </head> <body ng-app="app" ng-controller="ctr"> <select ng-model="str"> <option ng-repeat="(k,v) in data track by $index">{{v}}</option> </select> {{str}} <script> angular.module('app',[]) .controller('ctr', function ($scope) { $scope.data=[1,23,5,54,8,4,8] }) </script> </body> </html>
(k,v) in data track by $index 可分别输出key,value
str的值会是选中option中标签里面的内容 - ng-cloak
解决数据未加载是出现的双括号{{}},对含有那个数据属性的块为加载数据之前为隐藏
<style> [ng-cloak]{ display: none; } </style> </head> <body ng-app> <p ng-cloak="">{{'asdada'+'dads'}}</p> <script src="angular.js"></script> </body>
-
ng-class
7 <style> 8 .red{ 9 color: red; 10 } 11 .yellow{ 12 color: yellow; 13 } 14 </style> 15 </head> 16 <body ng-app="app" ng-controller="ctr"> 17 <!--方法1 18 <p ng-class="{'true':'red','false':'yellow'}[flag]"> 我是内容</p> 19 --> 20 <!--方法2--> 21 <p ng-class="{'yellow':flag}"> 我是内容</p> 22 23 <!--方法3 24 <p class="{{变量}}"> 我是内容</p> 25 --> 26 <button ng-click="fn()">按钮{{flag}}</button> 27 <script> 28 angular.module('app',[]) 29 .controller('ctr', function ($scope) { 30 $scope.flag=true; 31 $scope.fn= function () { 32 $scope.flag=!$scope.flag; 33 } 34 }) 36 </script>
-
ng-style
1<
p
ng-style={'color':'red'}>53456</
p
>
-
ng-selected
1<
option
value="red" ng-selected='true'>红</
option
>
-
ng-switch
<div ng-init="str=1" ng-switch="str"> <div ng-switch-when="red">我是red</div> <div ng-switch-when="yellow">我是yellow</div> <div ng-switch-when="blue">我是blue</div> <div ng-switch-default="">我没被选</div> </div>
-
ng-cheched='str'
这里的str不会将数据返回$scope只吧数据返回视图<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .red{ color:red; } </style> </head> <body ng-controller="ctr"> <p><input type="checkbox" ng-model="str"/>是否全选</p> <ul> <!-- ng-checked只会从数据到视图 --单向绑定 而ng-model会把数据同步到视图,也会把视图的改变同步到数据------双向绑定--> <li>选项01<input type="checkbox" ng-checked="str"/></li> <li>选项02<input type="checkbox" ng-checked="str"/></li> <li>选项03<input type="checkbox" ng-checked="str"/></li> <li>选项04<input type="checkbox" ng-checked="str"/></li> <li>选项05<input type="checkbox" ng-checked="str"/></li> </ul> <strong>{{str}}</strong> </body> <script src="angular.js"></script> <script> angular.module('app',[]) .controller('ctr',function($scope){ $scope.data=['张三','王五','李四','赵六','赵六'] }) </script> </html>