一,背景介绍
指令是一个Dom元素上的标签(和元素上的属性,CSS类样式一样,属于这个Dom元素),它告诉AngualrJS的HTML编译器,去附加一个行为到这个Dom元素上去,这个行为可以改变这个Dom元素,或者这个Dom元素的子元素.AngularJS通过被称为指令的新属性来扩展HTML.AngularJS通过内置的指令来为应用添加功能.AngularJS内置指令是扩展的HTML属性,带有前缀ng-。
二,知识剖析
常用的指令
1.添加点击事件NG-点击
NG-点击是用来告诉AngularJS当他所在的元素被点击时出发某个函数纳克单击= '的乐趣()';
AngularJS只会在$范围中寻找你要运行的函数,并不会去搜索全局函数;
<button ng-click="count = count + 1">点我!</button>
2.动态绑定之NG-模型标签
任何有用户输入,只要是有值的html标签,都可以动态绑定js中的变量,而且是动态绑定。
<input type="text" ng-model='password'>
3.分支语句之NG-如果标签
ng-hide:指令在表达式为真时隐藏指定的HTML元素。
ng-show:指令在表达式为真时显示指定的HTML元素。
ng-if指令用于在表达式为false时移除HTML元素。如果ng-if语句执行的结果为true,会添加HTML元素,并显示。
指令不同于NG隐藏/ NG-显示,NG-隐藏/ NG秀是隐藏元素,设置元素的显示为无,而NG-如果是从DOM中移除元素。
4.迭代输出之NG-重复标签
ng-repeat让表ul ol等标签和js里的数组完美结合;
<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>
5.控制CSS之NG式标签
ng-repeat让表ul ol等标签和js里的数组完美结合;
<span ng-style="myColor">your color</span>
你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:
$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};
4.迭代输出之NG-重复标签
ng-repeat让表ul ol等标签和js里的数组完美结合;
<ul>
<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>
5.控制CSS之NG式标签
ng-repeat让表ul ol等标签和js里的数组完美结合;
<span ng-style="myColor">your color</span>
你可以通过给myColor赋值的形式来改变你想要的效果,就像这样:
$scope.myColor={color:'blue'};
$scope.myColor={cursor: 'pointer',color:'blue'};
6.动态绑定类名之纳克级
ng-class指令用于给HTML元素动态绑定一个或多个CSS类。
语法
<element ng-class="expression"></element>
三,常见问题与解决方案
1,调用ng-if中绑定的ng-model值无效
答:可能是页面载入时,因为表达式为false,所以数据没有成功的双向绑定,
因为ng-if是移除元素。
2,ng-options 设置初始值,无法正常显示,使用对象作为数据源, x 为键(key), y 为值(value):
html:
<div class="col-md-4 col-sm-12">
<div class="row">
<label class="col-md-4 col-sm-4">类    型</label>
<!--<select ng-init="selectedType = type.type1.type" ng-model="selectedType" ng-options="x for (x,y) in type)">-->
<!--</select>-->
<select ng-init="selectedType = type.type1.type" ng-model="selectedType" ng-options="y.type for (x, y) in type">
</select>
<p>{{type.type1.type}}</p>
</div>
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<label class="col-md-4 col-sm-4">状    态</label>
<select ng-init="selectedState = state.state1" ng-model="selectedState" ng-options="y for (x,y) in state">
</select>
</div>
</div>
</div>
js:
$scope.type = {
state1 :"全部",
type1 : {type:"全部"},
type2 : {type:"首页Banner"},
type3 : {type:"找职位Banner"},
type4 : {type:"找精英Banner"},
type5 : {type:"行业大图"}
};
$scope.state = {
state1:"全部",
state2:"草稿",
state3:"上线",
}
答:初始值的设置需要注意,selectedType = 等于的值应该相当与后面的y,所以,正确写法是selectedType = type.type1
3,$index如何使用?
答:$index不能用作与数据做绑定,只能作序号呈现,因此,不要用$index用作与任何业务相关的逻辑的部分,这是基础知识。
四,相关链接
ppt:https://it-xzy.github.io/WEB-NEW/2018-7-13-C-js8-tds.html