angularJS 常用的渲染指令、事件指令和节点指令

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

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

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

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

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

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

注:所有ng-指令里,除变量外的所有字符串都必须加''
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值