AngularJS在过滤器之后的数组中第一个

问题描述 投票:16回答:3

在我的控制器中,我可以呼叫:

$scope.list[0];

访问我数组中的第一项。有没有一种方法可以记住过滤器。

例如,我有:

filter:search

重复一遍,我怎么称呼$ scope.list [0];等于第一个搜索结果?

javascript angularjs angularjs-scope angularjs-ng-repeat angularjs-filter
3个回答
10
投票

这可以通过将过滤器的依赖项注入到控制器中并在类似的代码中调用它来完成

var filteredArray = filterDependency(arrayToFilter,args);

返回一个新的过滤数组。由于您正在使用“过滤器”过滤器(这是一个名称为filter的过滤器),因此依赖项注入应为filterFilter。您的控制器应如下所示:

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope,filterFilter){
    var filteredArray = [];
    $scope.list = ["abc","def","ghi","abcdefghi"];
    $scope.$watch('search',function(newValue){
       filteredArray = filterFilter($scope.list, newValue);
       // do something with the first result
       console.log(filteredArray[0]); // first result
    });    
});

我们正在做的是在输入模型(search)上设置监视,以便我们可以获取新值并在输入改变时重新过滤数组。


如果需要从视图内部访问ng-repeat索引,则可以使用$index内部的特殊属性ng-repeat,例如:

<div ng-repeat="item in list | filter:search">
    {{$index}}
</div>

您也可以使用$first$middle$last as shown in this Angular doc

演示Here is a fiddle


3
投票

不带支架。如果您的ng-repeat带有过滤器:

ng-repeat="thing in things | filter:search"

这里的过滤列表是匿名的-它没有可访问的名称。

也就是说,如果您查看docs for ngRepeat,您会发现在每个转发器的作用域内,您都可以访问$index$first$middle$last

所以类似

<body ng-app="App" ng-controller="Main">
    <pre ng-repeat="n in nums | filter:isOdd">
        n={{n}}:index={{$index}}:first={{$first}}:middle{{$middle}}:last={{$last}}
    </pre>
</body>

将产生收益:

    n=1:index=0:first=true:middlefalse:last=false

    n=3:index=1:first=false:middletrue:last=false

    n=5:index=2:first=false:middlefalse:last=true

Fiddle


0
投票

您使用的是“ ng-repeat”吗?如果是这样,请查看属性$ first,$ index,$ middle和$ last。这将使您可以从重复项中获取有关特定项目的信息。

有关更多信息,请点击此处:http://docs.angularjs.org/api/ng.directive:ngRepeat

© www.soinside.com 2019 - 2024. All rights reserved.