title速度 - w3c css tooltip




有條件地應用課程的最佳方式是什麼? (15)

比方說你有一個數組,用ul表示每個元素和一個名為selectedIndex的控制器的屬性。 在AngularJS中用indexIndex添加一個類到li的最好方法是什麼?

我目前正在復制(手工) li代碼,並將其添加到li標籤之一,並使用ng-showng-hide來顯示每個索引只有一個li


局部

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

調節器

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

ng-class支持必須評估為的任一表達式

  1. 一串空格分隔的類名,或者
  2. 一組類名,或者
  3. 類名的映射/對象為布爾值。

所以,使用表單3)我們可以簡單地寫

ng-class="{'selected': $index==selectedIndex}"

另請參見如何在AngularJS中有條件地應用CSS樣式? 為更廣泛的答案。

更新 :Angular 1.1.5增加了對三元運算符的支持,所以如果你更熟悉這個構造:

ng-class="($index==selectedIndex) ? 'selected' : ''"

以及我會建議你檢查控制器中的條件與返回truefalse的函數。

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

並在您的控制器中檢查條件

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

你可以使用this npm包。 它處理所有事情,並且有基於變量​​或函數的靜態和條件類的選項。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

如果你不想像我這樣將CSS類名稱放入Controller中,那麼這是我在v1前幾天使用的一個老技巧。 我們可以編寫一個直接評估所選類名的表達式,不需要自定義指令:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

請注意與冒號的舊語法。

有條件地應用課程還有一個更好的方法,例如:

ng-class="{selected: $index==selectedIndex}"

Angular現在支持返回對象的表達式。 此對象的每個屬性(名稱)現在都被視為類名稱,並根據其值進行應用。

然而這些方式在功能上並不相同。 這裡是一個例子:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

因此,我們可以通過將模型屬性基本映射到類名稱來重用現有的CSS類,同時保持CSS類不在Controller代碼中。


如果你有一個應用於很多元素的公共類,你可以創建一個自定義指令,它會添加像ng-show / ng-hide這樣的類。

如果點擊該指令,該按鈕會將按鈕'active'添加到按鈕

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

更多信息


如果您想要超越二元評估並將您的CSS排除在控制器之外,則可以實現一個簡單的過濾器,用於根據地圖對象評估輸入:

angular.module('myApp.filters, [])
  .filter('switch', function () { 
      return function (input, map) {
          return map[input] || '';
      }; 
  });

這使您可以像這樣編寫標記:

<div ng-class="muppets.star|switch:{'Kermit':'green', 'Miss Piggy': 'pink', 'Animal': 'loud'}">
    ...
</div>

它正常工作;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

我是Angular的新手,但已經找到了解決我的問題的方法:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

這將有條件地應用基於var的類。 它以圖標下載作為默認開始,使用ng-class,如果true/false檢查showDetails的狀態並應用class icon-upload 。 它的工作很棒。

希望能幫助到你。


我最喜歡的方法是使用三元表達式。

ng-class="condition ? 'trueClass' : 'falseClass'"

注意:如果您使用Angular的舊版本,則應該使用此版本,

ng-class="condition && 'trueClass' || 'falseClass'"

我會補充一點,因為其中一些答案似乎過時了。 以下是我的做法:

<class="ng-class:isSelected">

其中'isSelected'是在範圍角度控制器中定義的JavaScript變量。


為了更具體地解決您的問題,您可以通過以下方式生成列表:

HTML

<div ng-controller="ListCtrl">  
    <li class="ng-class:item.isSelected" ng-repeat="item in list">   
       {{item.name}}
    </li>  
</div>


JS

function ListCtrl($scope) {    
    $scope.list = [  
        {"name": "Item 1", "isSelected": "active"},  
        {"name": "Item 2", "isSelected": ""}
    ]
}


請參閱: http://jsfiddle.net/tTfWM/ : http://jsfiddle.net/tTfWM/

請參閱: ng-class : ng-class : ng-class


最近我是這麼做的:

<input type="password"  placeholder="Enter your password"
ng-class="{true: 'form-control isActive', false: 'isNotActive'}[isShowing]">

isShowing值是一個位於我的控制器上的值,通過單擊按鈕進行切換,單括號之間的部分是我在我的css文件中創建的類。

編輯:我還想補充一點,codechool.com有一個由AngularJS上的谷歌贊助的免費課程,它涵蓋了所有這些東西,然後是一些。 無需支付任何費用,只需註冊一個帳戶即可開始! 祝大家好運!


這可能會被低估為遺忘,但這裡是我如何使用1.1.5的三元運算符來切換類,具體取決於表中的行是第一個,中間還是最後一個 - 除非表中只有一行:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

這是一個更簡單的解決方案:

function MyControl($scope){
    $scope.values = ["a","b","c","d","e","f"];
    $scope.selectedIndex = -1;
    
    $scope.toggleSelect = function(ind){
        if( ind === $scope.selectedIndex ){
            $scope.selectedIndex = -1;
        } else{
            $scope.selectedIndex = ind;
        }
    }
    
    $scope.getClass = function(ind){
        if( ind === $scope.selectedIndex ){
            return "selected";
        } else{
            return "";
        }
    }
       
    $scope.getButtonLabel = function(ind){
        if( ind === $scope.selectedIndex ){
            return "Deselect";
        } else{
            return "Select";
        }
    }
}
.selected {
    color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="MyControl">
    <ul>
        <li ng-class="getClass($index)" ng-repeat="value in values" >{{value}} <button ng-click="toggleSelect($index)">{{getButtonLabel($index)}}</button></li>
    </ul>
    <p>Selected: {{selectedIndex}}</p>
</div>


這是在我的工作中有條件地判斷:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>




angularjs