Question

我需要将活动类添加到通过ng-if="!item.hidden"循环的第一个项目。它最初工作正常，因为 $ first 指令意味着 0 索引。但是，假设0 to 3rd索引被隐藏，因此不会显示，第四个索引是第一个显示的索引。

这是我的实际代码

<div ng-if="!item.hidden" ng-repeat="item in ctrl.event.items">    
<div class="title item" ng-class="{'active': $first }">

当我应用活动类的索引不是 0 时，

$first指令不起作用。

Answer 1

代替ng-if条件，您可以过滤项目。之后，$ first默认返回索引

<div  ng-repeat="item in items| filter:{hidden:false}">    
<div class="title item" ng-class="{'active': $first }">
  {{item.value}}
  </div>

请检查工作plnkr https://plnkr.co/edit/mFVhkf55bvv8Z70F9ufk?p=preview

Answer 2

这是一个很好的问题，如你所提到的问题， $index 无法完成，因为 $index 甚至会被计算在内它隐藏了元素。

但是，角度越来越强大，还有更多的选择。

以下是他们的解决方案，

在这个答案中，我使用filter直接过滤数组中的值，以便只显示过滤后的对象。

<强> ng-repeat="x in records | filter: (x.hidden == true)"

以上几行所做的是，不会考虑隐藏的值为真的值。

因此，$index不会从＆＃39; 0＆＃39;

开始

以下是工作示例：

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">



<table ng-controller="myCtrl" border="1">
<tr  ng-class="{'active': $index == 0 }"  ng-repeat="x in records | filter: (x.hidden == true)">
	
  <td>{{x.Name}}</td>
  <td>{{x.Country}}</td>  
</tr>
</table>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    {
      "Name" : "Alfreds Futterkiste",
      "Country" : "Germany",
      "hidden": true
    },
    {
      "Name" : "Berglunds snabbköp",
      "Country" : "Sweden",
      "hidden": false
    },
    {
      "Name" : "Centro comercial Moctezuma",
      "Country" : "Mexico",
      "hidden": false
    },
    {
      "Name" : "Ernst Handel",
      "Country" : "Austria",
      "hidden": false
    }
  ]
});
</script>

</body>
<style>
.active
{
background: green;
}
<style>
</html>

＆＃13;

Here is a working DEMO

将布尔标志添加到Angular ng-repeat

2 个答案: