2013-03-25 118 views
113

在Angular中,我在範圍內有一個返回大量對象的對象。每個都有一個ID(這被存儲在平面文件,所以沒有DB和我似乎無法用戶ng-resource在Angular中,我需要搜索一個數組中的對象

在我的控制器:

$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對象?

回答

95

我知道這可以幫助你一點。

這是我試圖爲你模擬的東西。

結帳了的jsfiddle;)

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

創建一個過濾器,你也可以在 'NG重複' 在控制器

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); 
    } 
}]); 

如果有任何問題,請讓我知道。

+0

作爲進出口新的角度和JavaScript,我沒有得到的 '+' 的含義 「如果(+輸入[I] .ID == + ID){」 語句,請你分享你的想法。 – Harshavardhan 2016-08-10 15:01:45

+0

完美解決方案! – 2016-10-05 10:31:07

+1

我認爲「+ input [i] .id == + id」確保您比較數字。因此,您可以將1或'1'傳遞給$ filter,它的行爲方式完全相同。 我使用的是字母數字Ids,所以我將其更改爲「input [i] .id === id」 – 2016-11-10 13:00:37

13

一個骯髒的和簡單的解決方案可能看起來像

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

爲什麼這是_dirty_解決方案? – Trialcoder 2014-09-01 07:06:07

+5

我的猜測是因爲可能會有10億條魚的記錄,我們只是逐一循環瀏覽它們 – RedactedProfile 2014-12-22 21:08:35

+6

其他語言中會有更多的記錄。我的意思是,C++中有很多魚。 (哦,閉嘴..我會去投票自己.. !!) – 2016-04-06 11:50:48

210

您可以使用現有的$過濾服務。我更新了上面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'; 
    } 
} 

角文檔的小提琴是在這裏http://docs.angularjs.org/api/ng.filter:filter

+4

Ofcourse - 比重寫它再容易得多。 – 2014-04-03 08:58:24

+2

非常有幫助 - 當我學習角度時,我意識到我需要停止思考jQuery函數(試圖讓$ .grep來做到這一點) - 而不是使用這個$ filter服務正是我所需要的! – Bobby 2015-01-24 05:00:23

+2

更好的答案,因爲它不涉及編寫自己的過濾器。 – stevenw00 2015-03-05 04:11:34

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); 

注意,我刪除了一元(+)運算符來實現基於字符串匹配...

+0

考慮到文檔狀態,這是ng-init的唯一用例,我會說這絕對是Angular的方式。 – bluehallu 2014-02-20 09:58:50

+0

很容易理解的例子和非常有幫助 – rainabba 2014-09-16 07:29:45

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); 
+0

這對我有效。簡單,光滑,易於測試。謝謝! – 2017-05-05 15:09:25