在多個陣列中的AngularJS過濾

我試圖在對象列表上應用過濾器，但我無法設法使其工作。我讀過AngularJS不提供「開箱即用」的多重對象過濾，可能這就是爲什麼它不起作用？在多個陣列中的AngularJS過濾

這裏是我的代碼：

<div class="list list-inset"> 
    <label class="item item-input" id="events-search"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch"> 
    </label> 
</div> 

<div class="list"> 

    <a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch"> 
     <img src="xxx"> 
     <h2>{{ info.name }}</h2> 
     <p>{{ info.date}} à {{ info.hour }}</p> 
    </a> 

</div>

例如，「相關信息」的價值會是這樣的：

 
Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 { 
    name: "This is an event", 
    ... 
}, 
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK { 
    name: "This is a second event", 
    ... 
}

我試圖通過名字來進行篩選。

有沒有人有想法？...謝謝！

來源

2015-10-04 Crazyman60

您是否在問如何通過一個或多個屬性值過濾JavaScript對象列表？ –

對不起如果我的問題不清楚。我想過濾其中有多個objets的數組，實際上，我的數組像{{id1：{name：「name」}，id2：{name：「name」}}，但我看到的每個AngularJS示例都是{name：「name」，name：「name」}，你明白我的意思了嗎？ – Crazyman60

如果您的數據位於哈希表而非實際數組中，那麼您需要使用密鑰，acc表示值在NG重複噝聲數據：

<a class="item item-thumbnail-left" href="#" ng-repeat="(key, value) in searchedInfos()"> 
     <h2>{{ value.name }}</h2> 
</a>

在這種佈置角度的過濾器不能簡單地應用於非陣列集，所以你對你的範圍創建自定義過濾功能，其將採取它的值從輸入：

<input type="text" ng-model="view.searchStr"/>

和範圍：

$scope.infos = { 
    Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: { 
     name: "This is an event" 
    }, 
    jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: { 
     name: "This is a second event" 
    } 
}; 

$scope.view = { 
    searchStr : "" 
} 

$scope.searchedInfos = function(){ 

    var searched = {}; 

    if ($scope.view.searchStr) { 

     angular.forEach($scope.infos, function(value, key){ 

      if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) { 

       searched[key] = value; 

      } 
     }); 

    } 

    else { 

     searched = $scope.infos; 
    } 

    return searched; 
}

Here is a working fiddle

來源

2015-10-04 13:00:33 XGreen

謝謝你非常詳細的例子，不幸的是，即使經過1小時試圖知道我可能做錯了什麼。在每一種情況下「$範圍。searchedInfos」之稱，在‘其他’的語句總是被調用，即使我打字的東西不匹配模式.. 也許是因爲我使用AngularJS在離子？（科爾多瓦） – Crazyman60

也許你有我已經更新了在模型中使用點符號的答案，以便解決這些可能的問題。再試一次 – XGreen

哇，夥計，非常感謝，它的工作就像一個魅力......你能解釋我爲什麼它沒有工作嗎？我看到你已經在「searchStr」之前放了一個「參數」，但我不明白爲什麼它不工作。反正，再次感謝兄弟 – Crazyman60

正如它的名字是在重複可變和不可用的，你可以通過索引

<h2>{{ info[0].name }}</h2> 
     <p>{{ info[0].date}} à {{ info[0].hour }}</p>

引用你的「這樣的」 JSON數組，你可能需要一個逗號

[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , { 
    name: "This is an event", 
...}, 
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK , { 
    name: "This is a second event", 
...}, 

...]

，每個信息元素將只有1個元素，並且可以用[0]引用

來源

2015-10-04 12:52:38 Kickaha

數據不一定需要在數組中。散列表是ng-repeat的有效案例。你不應該強制數據進入數組，除非你有一個合理的理由 – XGreen

@XGreen ..哈希表好吧，泰..指出。 – Kickaha

如果信息將是一個對象數組，並且您希望根據名稱而不是系統中的所有對象變量進行過濾，所以您只需將搜索變量轉換爲對象，但在其中使用相同的變量名稱要與

在你的代碼

搜索你只需要轉換輸入的NG-模型是這樣

<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">

並完成代碼的其餘部分，因爲它是

來源

2015-10-04 16:10:40

謝謝，但已經嘗試過，這是在你沒有數據之前沒有「鑰匙」的情況下工作。 – Crazyman60

在多個陣列中的AngularJS過濾

回答

相關問題