向ng-repeat添加過濾器

我目前正在使用Angular進行前端處理。我有一個JSON文件類似以下內容：向ng-repeat添加過濾器

{ 
    "groups": [ 
      group1: { 
        "part":1 
        }, 
      group2: { 
        "part":2 
        } 
       ] 
}

而且我有喜歡的列表如下：

<li ng-class="{active: section >= {{group.number}}}" ng-bind="group.title" ng-repeat="group in groups" ></li>

比方說，有100個團體在我的JSON文件。如果我只想顯示"part":1的羣組，我該如何在ng-repeat中添加此過濾器？

來源

2016-04-24 Kahsn

JSON是錯誤的組是一個數組，但其中有鍵值。 –

你的JSON數組是擰的，檢查這個例子http://plnkr.co/edit/8K0roOawfApaNq4yFjQh – sreeramu

你可以傳遞一個對象filter與要過濾的鍵/值：

ng-repeat="group in groups | filter:{part:1}"

來源

2016-04-24 04:53:08

如果我想讓'1'值爲動態的，我該如何增加？我是否用ng-repeat在列表之外再製造一個div？我想最終從1增加到10。 – Kahsn

您可以根據模型製作過濾器，如[文檔中所示]（https://docs.angularjs.org/api/ng/filter/filter）。 –

你可以使用範圍變量來實現過濾器的動態範例：http://plnkr.co/edit/8K0roOawfApaNq4yFjQh – sreeramu

從官方文檔

試試這個
ng-repeat="group in groups | filter:{'part': 1}:true" 
在HTML模板綁定
{{filter_expression |濾波器：表達：比較}}

爲比較值，如果其true

真：一種用於功能速記（實際，預期）{返回 angular.equals（實際，預期）}。這基本上是嚴格的比較預期和實際。

這給你確切的匹配

來源

2016-04-24 04:57:39

你的JSON看起來畸形在你有鍵值對的數組。
下面是一些應該工作的代碼。我正在使用Controller ViewAs語法。

HTML

<div ng-app="MyApp"> 
<div ng-controller="MyController as me"> 
    {{me.greeting}} 
    <ul> 
    <li ng-repeat="group in me.groups | filter:{'part': 1}:true"> 
     {{group}} 
    </li> 
    </ul> 
</div>

var myApp = angular.module('MyApp',[]); 

myApp.controller('MyController', function() { 
    this.greeting = 'Hola!'; 

    this.groups = [ {id: 'group1', "part":1 }, {id: 'group2', "part":2 } ]; 
});

Code Pen Here

來源

2016-04-24 05:03:35

考慮也傳遞function而不是Object爲filter（可工作這段時間，但不是所有的東西都容易直接在vi中以可讀的方式表達EW）：

ng-repeat="group in groups | filter:functionOnScope"

的|管上的東西向左groups工作，從而filter是一個函數，它的第一個參數接收groups和其隨後的參數出現在:之後。您可以將a | b:c:d | e想象爲e(b(a,c,d))--一旦我意識到我使用過濾器更多的是爲了簡單的事情。

所以第二個參數filter接收是謂詞（函數，它的東西，並返回true或false到每個元件上的操作 - 如SQL WHERE子句）內groups。過濾器是非常有用的 - 如果你想在視圖中做快速的邏輯或轉換（並且你不需要測試它），那麼它們可以使你的控制器和指令更加簡潔。（因此，代替ng-if="collection[collection.length - 1].length > 0"，您可以編寫ng-if="collection | last | some"，這樣更具可讀性。）

如果您有複雜的邏輯，可能會更好地放置控制器或指令而不是視圖（這也更容易進行單元測試這樣如果你關心它） - 如果它在視圖中，你至少需要像PhantomJS這樣的東西來模擬DOM。假設您在$scope到1,2等上綁定了一些dynamicallySelectedPart,2等可能作爲ng-model在<select />上，所以用戶可以選擇它，然後您可以編寫它以使其動態保持最新。

$scope.functionOnScope = function (elementInGroups) { 
    // Maybe do a check like: 
    // if ($scope.dynamicallySelectedPart === elementInGroups.part) { 
    return true; 
    // } 

    // Some other logic... 
    return false; 
};

來源

2016-04-24 05:15:41

向ng-repeat添加過濾器

回答

相關問題