指令：
ng-app：指向当前组件
ng-controller：指向对应的区域
ng-model:相当于v-model
ng-repeat=v-for
ng-init:
<h1 ng-init="name='lili;age=20'">{{name}}{{age}}</h1>
ng-repeat下对应的属性
$index索引
$first $middle $last $event $odd
ng-class ng-style
ng-if ng-show ng-hide
ng-switch 根据条件显示和隐藏
ng-readonly
ng-src//动态显示
ng-disabled
ng-bind ==={}
ng-cloak防止闪烁
ng-bind-templae==={}{}显示多个
var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表todoApp.controller("bodyCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法var name="lili";$scope.action=function(){});todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法$scope.name="todo";$scope.obj={name:'wo',age:20,arr:['a','b','v'],lists:[{msg:"a",name:"alert"},{msg:"b",name:"alert"},{msg:"c",name:"alert"},{msg:"d",name:"alert"}]}$scope.inputVal="123";$scope.changeName=function(){$scope.name="abc"}});<body ng-controller="bodyCtrl"><div ng-controller="todoCtrl"><h1>{{name}}</h1><h2>{{obj.arr}}</h2><ul><li ng-repeat="list in obj.lists">{{list.msg}}</li></ul><div><input type="text" ng-model="inputVal"/>{{inputVal}}</div><button ng-click="changeName()" type="button">click</button></div></body><style>.first{background-color:#f60;}.even{background-color:red;}.odd{background-color:blue;}</style><script src="node_modules/angular/angular.js"></script><script>var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法$scope.name="todo";$scope.obj={name:'wo',age:20,flag:true}$scope.myOption="a"//下拉框默认选项$scope.inputVal="123";$scope.lists=['a','b','c','d','e']})todoApp.controller("helloCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法</script><body ng-controller="todoCtrl"><div><h1>{{name}}</h1><ul><li ng-repeat="list in lists" ng-class="{first:$first}">{{list}}</li></ul><ul><li ng-repeat="list in lists" ng-class="{first:$index==2}">{{list}}</li></ul><ul><li ng-repeat="list in lists" ng-style="{first:$index==2?'#f60':''}">{{list}} </li></ul><ul><li ng-repeat="list in lists" ng-class="{even:$even,odd:$odd}">{{list}} </li></ul><p ng-if="obj.name==lili">show</p><div><select ng-model="myOption"><option value="a">A</option><option value="b">B</option><option value="c">C</option></select><div ng-switch="myOption"><div ng-switch-when="a"><h1>A</h1></div><div ng-switch-when="b"><h1>B</h1></div><div ng-switch-when="c"><h1>C</h1></div></div></div></div></body>
表单指令
单选框，复选框，下拉框
var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法$scope.formData={test1:"2"//默认值,myOption:'a',}$scope.lists1=['a','b','c','d']$scope.lists2=[{name:'选项A',value:'1'},{name:'选项B',value:'2},{name:'选项C',value:'3'},{name:'选项D',value:'4'}]//value表示传到后台的值，name,表示下拉选框选中的值$scope.lists3=[{name:'选项A',value:'1'，group:"A"},{name:'选项B',value:'2',group:"B"}, {name:'选项C',value:'3',group:"A"},{name:'选项D',value:'4',group:"B"}]$scope.submit=function(){alert(JSON.stringify($scope.formData))//不专程字符串显示的为object}})<body ng-controller="todoCtrl"><div ><input type="checkbox" ng-model="formData.checkVal" ng-true-value="1" ng-false-value="0" >//如果打钩传给后端true和false变为1或者0<button ng-disabled="formData.checkVal">button</button> //打钩formData.checkVal为true button将被禁用</div><div><input type="radio" name="test" value="1" ng-model="formData.test1">1<input type="radio" name="test" value="1" ng-model="formData.test1">2</div><div><select ng-model="formData.myOption"><option value="a">A</option><option value="b">B</option><option value="c">C</option></select></div><div>//动态数据结构v表示数组中的单个对象 as 左边表示下拉框选中的值：用于数据交互(传给后端的值) as对应的右边下拉框选项显示的值v表示当前数组的当前对象，相当于this.itemv.value as v.name for v in lists1//标准写法 ng-model="formData.myOption1" 默认选中的值<select ng-init="formData.myOption1=lists1[0]" ng-options="v for v in lists1"></select></div><div>//动态数据结构<select ng-model="formData.myOption2=lists2[0].value" ng-options="v.value as v.name for v in lists2"></select></div><div>//动态数据结构//这样写的话相当于把v in lists2中的V传到后端<select ng-model="formData.myOption2=lists2[0]" ng-options=" v.name for v in lists2"></select></div><div>//动态数据结构//这样写的话相当于把v in lists2中的V传到后端<select ng-model="formData.myOption2=lists3[0].value" ng-options=" v.value as v.name group by v.group for v in lists3"></select></div><button ng-click="submit()">button</button> </body>
如果觉得《angular基础知识简介2：常用指令介绍》对你有帮助，请点赞、收藏，并留下你的观点哦！
