2016-04-24 39 views
1

我目前正在使用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中添加此過濾器?

+0

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

+0

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

回答

1

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

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

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

+0

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

+0

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

1

從官方文檔

試試這個

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

在HTML模板綁定
{{filter_expression |濾波器:表達: 比較}}

爲比較值,如果其true

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

這給你確切的匹配

0
  • 你的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> 

JS

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

1

考慮也傳遞function而不是Objectfilter(可工作這段時間,但不是所有的東西都容易直接在vi中以可讀的方式表達EW):

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

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

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

如果您有複雜的邏輯,可能會更好地放置控制器或指令而不是視圖(這也更容易進行單元測試這樣如果你關心它) - 如果它在視圖中,你至少需要像PhantomJS這樣的東西來模擬DOM。假設您在$scope1,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; 
};