在Angular中,我需要搜索数组中的对象


114

在Angular中,我在范围内有一个对象,该对象返回许多对象。每个都有一个ID(此ID存储在一个平面文件中,所以没有DB,而且我似乎无法使用ng-resource

在我的控制器中:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

在我看来,我还有关于默认隐藏的鱼类的ng-show更多其他信息,但是当我单击简单的显示更多标签时,我想调用该函数showdetails(fish.fish_id)。我的函数看起来像:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

现在,在视图中将显示更多详细信息。但是,在搜索了文档之后,我无法弄清楚如何搜索该fish数组。

那么如何查询数组?在控制台中如何调用调试器,以便可以使用$scope对象?

Answers:


95

我知道这是否可以帮助您。

这是我尝试为您模拟的内容。

签出jsFiddle;)

http://jsfiddle.net/migontech/gbW8Z/5/

创建了一个也可以在“ ng-repeat”中使用的过滤器

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

控制器中的用法:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

如有任何疑问,请告诉我。


作为对angular和javascript的新手介绍,我在“ if(+ input [i] .id == + id){”语句中未获得“ +”的含义,请您分享您的想法。
Harshavardhan

完美的解决方案!
阿尼尔·库马尔·拉姆

1
我认为“ + input [i] .id == + id”确保您正在比较数字。因此,您可以将1或'1'传递给$ filter,它的行为完全相同。我使用的是字母数字ID,因此将其更改为“ input [i] .id === id”
Axel Zehden

211

您可以使用现有的$ filter服务。我更新了http://jsfiddle.net/gbW8Z/12/上面的小提琴

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

Angular文档在这里http://docs.angularjs.org/api/ng.filter:filter


2
非常有帮助-当我学习angular时,我意识到我需要首先停止思考jQuery函数(试图让$ .grep做到这一点)-而不是使用此$ filter服务正是我所需要的!
2015年

2
更好的答案,因为它不需要编写自己的过滤器。
stevenw00 2015年

您能否添加详细信息$scope.selected是/包含的内容。对找到的ng-selected/ ngSelected: 进行快速搜索If the expression is truthy, then special attribute "selected" will be set on the element。一样吗 在您的示例中,它是做什么的?谢谢
surfmuggle

1
太棒了!使它变得简单。谢谢
Bharath

2
不要忘记将$ filter服务添加到您的控制器。即:app.controller('mainController',['$ filter',function($ filter){//现在可以使用$ filter。}]);
Lucas Reppe Welander

22

要添加到@migontech的答案以及他在他的评论中的意见,即“可以使它更通用”,这是一种方法。下面将允许您按任何属性进行搜索:

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

过滤器的调用将变为:

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

注意,我删除了unary(+)运算符,以允许基于字符串的匹配...


考虑到文档指出这是ng-init的唯一用例,我想这肯定是Angular的方法。
bluehallu 2014年

非常容易理解的示例,非常有帮助
rainabba 2014年

13

肮脏又简单的解决方案可能看起来像

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

5
为什么这是一个肮脏的解决方案?
Trialcoder

5
我的猜测是,因为有可能是一样,一个十亿鱼记录,我们只是通过他们一个接一个循环
RedactedProfile

6
还有其他语言的记录。我的意思是,C ++中有很多鱼。(噢,闭嘴..我会去投票否决.. !!)
Mike Gledhill

7

Angularjs已经具有过滤器选项可以执行此操作,https: //docs.angularjs.org/api/ng/filter/filter


7

您的解决方案是正确的,但不必要的复杂。您可以使用纯JavaScript过滤器功能。这是您的模型:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

这是您的功能:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

您还可以使用表达式:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

有关此功能的更多信息:LINK


4

看到了这个主题,但我想搜索与搜索不匹配的ID。代码来做到这一点:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

这对我有用。简单,光滑,易于测试。谢谢!
Kalpesh Panchal
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.