【修真院web小课堂】angular js 常用指令是如何使用的？

一，背景介绍

指令是一个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">类&nbsp&nbsp&nbsp&nbsp型</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">状&nbsp&nbsp&nbsp&nbsp态</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用作与任何业务相关的逻辑的部分，这是基础知识。

视频：https://v.qq.com/x/page/k0723q198we.html