zoukankan      html  css  js  c++  java
  • AngularJS中ng-class使用方法

     三种方法:
    1. 通过$scope 绑定(不推荐);
    function ctrl($scope){
    $scope.className = "selected";
    }

    <div class="{{className}}"></div>


    2. 通过对象数组绑定;
    function ctrl($scope){
    $scope.isSelected = true;
    }
    <div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

    // 当 isSelected为true时,增加selected样式,当isSelected为false时,增加unselected样式;


    3. 通过 key/value 键值对绑定
    function ctrl($scope){
    $scope.isA = true;
    $scope.isB = false;
    $scope.isC = false;
    }

    //当 isA为true时,增加 A 样式;当isB 为 true时,增加 B 样式;当isC 为 true时,增加 C 样式;

    <ion-list>
    <ion-item ng-repeat = "project in projects" ng-click = "selectProgect(project,$index)" ng-class="{active:activeProject == project}">
    {{project.title}}
    </ion-item>
    </ion-list>

    //根据 projects 创建 ico-item, 当activeProject为当前循环到的project 时,增加active样式;



    说明:
    1. 不推荐 第一种方法,因为controller,$scope 应该只有数据和行为;
    2. ng-class是增加相关样式,可以和class同时使用;
  • 相关阅读:
    605
    603
    509
    7-5
    6-5
    5-6
    5-3
    5-4
    5-5
    4-12
  • 原文地址:https://www.cnblogs.com/nnf-888/p/8432497.html
Copyright © 2011-2022 走看看