Question

我在angularjs中使用多重排序我想在点击的Li标签上添加类，当我使用下面的代码进行单值排序时，它工作正常：

<li ng-class="{ active:sortType === 'rollno'}"><a ng-click="sortType = 'rollno';"><span>Sort by Rollno</span></a></li>

<li ng-class="{ active: sortType === 'marks'}"><a  ng-click="sortType = 'marks';"><span>Sort by marks</span></a></li>

但是当我使用多值排序时，它不会像下面的代码中那样改变它的类：

  <li ng-class="{ active:sortType === ['rollno','marks']}"><a ng-click="sortType = ['rollno','marks'];"><span>Sort by Rollno</span></a></li>

<li ng-class="{ active: sortType === ['marks','rollno']}"><a  ng-click="sortType = ['marks','rollno'];"><span>Sort by marks</span></a></li>

我的排序工作正常但在更改排序的li标签上的类时出现问题。在控制器中：

$scope.sortType='';

Answer 1

数组不等于JavaScript中的另一个数组，即使两者都包含相同的字符串：

console.log(['a'] === ['a']); // prints false

因此，您需要另一种方式来了解排序类型是['rollno','marks']还是['marks','rollno']。

你可以简单地使用

ng-class="{ active: sortType[0] === 'rollno' }"

或者您可以向控制器添加一个功能，如

$scope.isSortTypeEqualTo = function(sortType) {
    return angular.equals($scope.sortType, sortType);
};

并使用

ng-class="{ active: isSortTypeEqualTo(['rollno','marks']) }"

Answer 2

您可以使用indexOf()来测试某个值是否在数组中，然后在data-ng-class中使用

<li data-ng-class="{ 'active' : (sortType.indexOf('rollno') == 0)}"><a ng-click="sortType = ['rollno','marks'];"><span>Sort by Rollno</span></a></li>

<li data-ng-class="{ 'active' : (sortType.indexOf('marks') == 0)}"><a  ng-click="sortType = ['marks','rollno'];"><span>Sort by marks</span></a></li>

在第一次检查时，您将获得第0个索引的rollno，而在另一个索引中，您将获得第0个索引的marks。

我假设您首先将sortType定义为控制器中的数组。请检查工作fiddle。

Answer 3

我得到了我的问题的解决方案，但发布此答案以帮助其他人在同一方面： -

我们可以简单地使用

ng-class =＆＃34; {active：sortType [0] ===＆＃39; rollno＆＃39; }＆＃34;如果是按Rollno排序

<a ng-click="sortType = ['rollno','marks'];"><span>Sort by Rollno</span></a> 对于ng-class =＆＃34; {active：sortType [0] ===＆＃39;标记＆＃39; }＆＃34;在按标记排序的情况下

<a  ng-click="sortType = ['marks','rollno'];"><span>Sort by marks</span></a>

谢谢：）

Answer 4

将rollno或标记分配给onclick函数，然后代码将起作用。您需要按照以下方式更改代码才能正常工作..

<li ng-class="{ active:(sortType =='rollno'|| sortType =='marks')}"><a ng-click="sortType ='rollno'"><span>Sort by Rollno</span></a></li>

<li ng-class="{  active:(sortType =='rollno'|| sortType =='marks')}"><a  ng-click="sortType ='marks'"><span>Sort by marks</span></a></li>

AngularJS ngClass对排序中的多个变量有条件

4 个答案: