分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularJS 常用的渲染指令、事件指令和节点指令，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

渲染指令：
    1）ng-init： 初始化变量  例：ng-init="cityArr=['上海','北京','杭州']"
    2）ng-bind： 绑定模型    例：<p ng-bind="1+1"></p>
    3）ng-bind-template: 绑定模型 不加{{}}则直接绑定内容  例：<p ng-bind-template="{{ 1+3 }}"></p>
    4）ng-repeat：          例：ng-repeat="city in cityArr"
      $index  当前索引
      $first  是否为头元素
      $middle 是否为非头非尾元素
      $last   是否为尾元素
    5）ng-include：载入另一个页面  例：<div ng-include="'other.html'"></div>  或：<div ng-include src="'other.html'"></div>

事件指令：
    1）ng-click：指定点击事件 例：ng-click="changeStatus($event)"
              在控制器中定义具体事件执行代码：
              $scope.changeStatus=function(event){
                   $scope.status= !$scope.status;
                   angular.element(event.target).html('切换状态 '+$scope.status);   //通过angular.element()转换成jquery对象
              };

节点指令：
    1）ng-style       先在控制器中定义一个样式： $scope.defaultStyle={Color:'red','margin-top':'50px'};
                      再应用在页面上：<div ng-style="defaultStyle">

    2）ng-class       当表达式为真时添加某个class，               例： ng-class="{ red:status }"
    3）ng-class-even  当前行是偶数行时添加某个class               例： ng-class-even="'evenRow'"
    4）ng-class-odd   当前行是奇数行是添加某个calss(第1行为奇数行)  例： ng-class-odd="'oddRow'"
    5）ng-show        为真时显示,例： <div ng-show="status">status为真时显示</div>
    6）ng-hide        为真时隐藏

    7）ng-switch
        例如：
        <ul ng-switch on="status">
            <li ng-switch-when="true">
                true 呵呵
            </li>
            <li ng-switch-when="false">
                false 呵呵呵
            </li>
        </ul>

    8）ng-src      表达式作为图片url，例：<img ng-src="{{src}}">
    9）ng-href     表达式作为url
    10）ng-if      为真时显示：<div ng-if="status">为真时显示</div>

注：所有ng-指令里，除变量外的所有字符串都必须加''