如果在ng類中檢查多個

因此，我在我的angularjs應用程序中包含這段代碼，該代碼包含在表中。如果索引僅爲0,1或2，我想激活「罕見」類。索引是行。假設我的表格中有8行。只有前3個應該有'罕見'的類適用於它。如果在ng類中檢查多個

ng-class="{rare : $index === 0, rare : $index === 1, rare : $index === 2}"

但有寫它的一個更簡單/短呢？這是一個好習慣嗎？我認爲它看起來非常好，即使它有效。你會如何編寫if檢查？

我想：

ng-class="{rare : $index === {0,1,2}}，但它沒有工作

來源

2016-11-19 rick astley

嘿@rick阿斯特利 - 看看我的答案 - 即使你已經接受了另一個答案 - 雷是一個很簡單的一個爲您提供在線解決方案 – gavgrif

你可以做這樣的事情，如果你有值的列表。

var app = angular.module("sampleApp", []); 
 

 
app.controller("sampleController", ["$scope", 
 
    function($scope) { 
 
    $scope.data = "Test"; 
 
    $scope.rareList = [1, 2, 3]; 
 
    $scope.val1 = 2; 
 
    $scope.val2 = 5; 
 
    } 
 
]);

.active { 
 
    color: red; 
 
} 
 
.not-active { 
 
    color: blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
<div ng-app="sampleApp"> 
 
    <div ng-controller="sampleController"> 
 
    <div ng-class="rareList.includes(val1)? 'active' : 'not-active'">{{data}}</div> 
 
    <div ng-class="rareList.includes(val2)? 'active' : 'not-active'">{{data}}</div> 
 
    </div> 
 
</div>

來源

2016-11-19 21:31:01 Sreekanth

事情是，我想寫在1行。我的代碼有效，但我只是想縮短它。如果我使用你的代碼，我仍然必須進行3次檢查。我只是想知道是否有任何方法可以檢查index是0,1或2是否更好。我可能有辦法在「includes」中傳入一組值嗎？如果是這樣，那麼你的代碼將是驚人的 –

Ohhhh ......現在我明白你的代碼。所以我會寫：'[1,2,3] .includes（index）？ '罕見'：'''對嗎？ –

是的..只是檢查價值指數。並分配 – Sreekanth

我失去了一些東西在這裏 - 如果$指數是行索引 - 它必須從0開始，然後遞增。因此，您可以忽略下限並簡單測試索引是否小於上限（請注意，$ index將爲零索引（除非您明確將其設置爲從1開始），因此如果測試$ index小於3將會允許您選擇行索引0,1和2）。

ng-class="{rare: $index < 3}"

var app = angular.module("sampleApp", []); 
 

 
    app.controller("sampleController", ["$scope", 
 
     function($scope) { 
 
     $scope.data = ['test1','test2','test3','test4']; 
 
     } 
 
    ]);

.rare { 
 
    color: red; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
    <div ng-app="sampleApp"> 
 
     <div ng-controller="sampleController"> 
 
     <div ng-class="{rare: $index < 3}" ng-repeat="datum in data">{{datum}} ($index = {{$index}})</div> 
 

 
     </div> 
 
    </div>

來源

2016-11-19 22:36:27 gavgrif

用途：

ng-class="{rare : [0,1,2].indexOf($index) >= 0}}

來源

2016-11-23 00:05:57 georgeawg

如果在ng類中檢查多個

回答

相關問題