【问题标题】:In Angular, I need to search objects in an array在 Angular 中,我需要在数组中搜索对象
【发布时间】:2013-03-14 16:19:23
【问题描述】:

在 Angular 中,我在范围内有一个返回大量对象的对象。每个都有一个 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 对象?

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    您可以使用现有的 $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

    【讨论】:

    • 非常有帮助——当我学习 Angular 时,我意识到我需要先停止思考 jQuery 函数(试图让 $.grep 来做这件事)——而不是使用这个 $filter 服务就是什么我需要!
    • 更好的答案,因为它不涉及编写自己的过滤器。
    • 您能否添加详细信息 $scope.selected 是/包含什么。快速搜索选定的我发现ng-selected / ngSelected:If the expression is truthy, then special attribute "selected" will be set on the element。这是一样的吗?在您的示例中,它有什么作用?谢谢
    • 太棒了!。让它变得简单。谢谢
    • 不要忘记将 $filter 服务添加到您的控制器。即:app.controller('mainController', ['$filter', function($filter) { // $filter 现在可以使用了。}]);
    【解决方案2】:

    我知道这对你有没有帮助。

    这是我试图为你模拟的东西。

    签出 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) {” 语句中没有理解 '+' 的含义,请您帮忙分享你的想法。
    • 完美解决方案!!
    • 我认为 "+input[i].id == +id" 确保您在比较数字。因此,您可以将 1 或 '1' 传递给 $filter,它的行为方式完全相同。我使用的是字母数字 ID,所以我将其更改为“input[i].id === id”
    【解决方案3】:

    要添加到@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 的做法。
    • 非常容易理解且非常有帮助的示例
    【解决方案4】:

    一个肮脏而简单的解决方案可能看起来像

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

    【讨论】:

    • 为什么这是一个解决方案?
    • 我的猜测是因为可能有 10 亿条鱼记录,而我们只是一个一个地遍历它们
    • 会有更多其他语言的记录。我的意思是,C++ 中有很多鱼。 (哦闭嘴..我会去投票给自己..!!)
    【解决方案5】:

    Angularjs 已经有过滤选项可以做到这一点, https://docs.angularjs.org/api/ng/filter/filter

    【讨论】:

      【解决方案6】:

      您的解决方案是正确的,但不必要的复杂。您可以使用纯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

      【讨论】:

        【解决方案7】:

        看到这个帖子,但我想搜索与我的搜索不匹配的 ID。执行此操作的代码:

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

        【讨论】:

        • 这对我有用。简单,流畅,易于测试。谢谢!
        猜你喜欢
        • 1970-01-01
        • 2020-05-16
        • 2017-05-21
        • 2011-04-07
        • 2015-09-12
        • 2013-09-03
        • 1970-01-01
        • 1970-01-01
        • 2020-01-13
        相关资源
        最近更新 更多