2.知识剖析

常用的指令

1.添加点击事件ng-click

2.动态绑定之ng-model标签

3.分支语句之ng-if标签

4.迭代输出之ng-repeat标签

5.控制css之ng-style标签

6.动态绑定类名之ng-class

1.添加点击事件ng-click

ng-click是用来告诉AngularJS当他所在的元素被点击时出发某个函数ng-click=‘fun()’；

AngularJS只会在$scope中寻找你要运行的函数，并不会去搜索全局函数；

                
                    <button ng-click="count = count + 1">点我！</button>
                
            

2.动态绑定之ng-model标签

任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量， 而且是动态绑定。

                
                   <input type="text" ng-model='password'>
                
            

3.分支语句之ng-if/ng-show/ng-hide标签

ng-hide: 指令在表达式为true时隐藏指定的HTML元素。

ng-show: 指令在表达式为true时显示指定的HTML元素。

ng-if指令用于在表达式为false时移除HTML元素。 如果ng-if语句执行的结果为true，会添加HTML元素，并显示。

指令不同于ng-hide/ng-show,ng-hide/ng-show是隐藏元素,设置元素的display为none,而ng-if是从DOM中移除元素。

4.迭代输出之ng-repeat标签

ng-repeat让table ul ol等标签和js里的数组完美结合;

                
                      <ul>
                      <li ng-repeat="person in persons">
                      {{person.name}} is {{person.age}} years old.
                      </li>
                      </ul>
                
            

5.控制css之ng-style标签

ng-repeat让table ul ol等标签和js里的数组完美结合;

                
                     <span ng-style="myColor">your color</span>
                
            

你可以通过给myColor赋值的形式来改变你想要的效果，就像这样：

                
                    $scope.myColor={color:'blue'};
                    $scope.myColor={cursor: 'pointer',color:'blue'};
                
            

6.动态绑定类名之ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

语法

                
                    <element ng-class="expression"></element>
                
            

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8 更多讨论

鸣谢

感谢大家观看

BY : 田迪生