Angular 限制为 ng-repeat 中的第一个 ng-if TRUE 项目

Question

嘿，我如何在 ng-repeat 中只显示第一个计算结果为 true 的数字？

在我的指令（或控制器）中我有：

ctrl.things = [1,2,3,4,5,6];

在我的 html 中：

<div ng-repeat='thing in ctrl.things' >
    <span ng-if="thing>3" ng-show="$first">{{thing}}</span>
</div>

如何只显示 4 个结果？

请记住这个例子是简化的。实际上在 ng-repeat 中有一个 ng-repeat，因此（和其他事情）我在指令（控制器）中做的事情并不多。非常感谢任何解决方案。

Answer 1

我想你正在寻找这个：

//controller
$scope.ctrl={};
$scope.ctrl.things=[{1:false},{2:false},{3:false},{4:true},{5:true}];
$scope.check=function(value){
 $scope.count = value === true?($scope.count+1):$scope.count;
 return $scope.count ===1 ;
}
//end of controller

HTML

<div ng-repeat='(key,value) in ctrl.things' >
    <span ng-if="check(value)">{{key}}</span>
</div>

要显示第一个元素，如果你想显示最后一个元素，你可以放 ng-if="$last"

Answer 2

在范围内声明一个方法

$scope.getData=function(obj){
      return obj > 3;
    }

然后将此作为过滤器添加到 div

<div ng-repeat='thing in things | filter : getData'  ng-if="$first"> 
    <span >{{thing}}</span>
</div>

JSFIDDLE

如果想使用 this

像这样尝试

在范围内声明一个方法

vm.getData=function(obj){
  return obj > 3;
}

然后将此作为过滤器添加到 div

 <div ng-repeat='thing in vm.things | filter : vm.getData'  ng-if="$first"> 
    <span >{{thing}}</span>
</div>

JSFIDDLE

Answer 3

您应该创建一个过滤器或像这样内联它：

<div ng-repeat='thing in ctrl.things' ng-if="thing > 3">
    <span ng-if="$first">{{thing}}</span>
</div>

应该可行

Angular 限制为 ng-repeat 中的第一个 ng-if TRUE 项目

Angular limit to first ng-if TRUE item in ng-repeat

angularjs

ng-repeat