初始化時過濾JSON數據

Question

這是我的JSON對象：

{
Stores: [
{
    Name: "Store #1",
    DealerType: "Office"
},
{
    Name: "Store #2",
    DealerType: "Office"
},
{
    Name: "Store #3",
    DealerType: "Office"
},
{
    Name: "Store #4",
    DealerType: "Headquater"
},
]
}

這是我的看法：

<select id="dealerType">
     <option value="">All</option>
     <option value="Office">Office</option>
     <option value="Headquater">Headquaters</option>
</select>
<ul>
    <li ng-repeat="store in stores | filter:dealerType">{{store.Name}}</li>
</ul>

我只想在頁面加載中顯示一個帶有DealerType: "Headquater"商店，並且仍然能夠使用<select> DealerType: "Headquater"的過濾器功能

我嘗試將ng-repeat更改為： ng-repeat="store in stores | filter:{DealerType: 'Headquater'} | filter:dealerType" 。 這確實按DealerType進行過濾，但在我更新“ dealerType”選擇時不會更改。

Answer 1

兩件事情：

使用ng-model

確保將選擇設置為模型的一部分，

<select ng-model="dealerType">...</select>

過濾表達式

使用適當的過濾器表達式將您的屬性定位到上面定義的模型。

<li ng-repeat="store in stores | filter:{'DealerType': dealerType}:true">{{store.Name}}</li>

看看這個類似的答案 。

這是一個工作中的小伙伴 。

Answer 2

http://jsbin.com/fuwaki/1/edit

<div ng-app="app">
    <div ng-controller="fCtrl">
      <select id="dealerType" ng-model="dealerType">
     <option value="">All</option>
     <option value="Office">Office</option>
     <option value="Headquater">Headquaters</option>
</select>
<ul>
    <li ng-repeat="store in stores | filter:dealerType">{{store.Name}}  | {{store.DealerType}}</li>
</ul>
    </div>
    </div>


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

app.controller('fCtrl', function($scope){

   $scope.stores= [{
     Name: "Store #1",
     DealerType: "Office"
 }, {
     Name: "Store #2",
     DealerType: "Office"
 }, {
     Name: "Store #3",
     DealerType: "Office"
 }, {
     Name: "Store #4",
     DealerType: "Headquater"
 } ];

$scope.dealerType = 'Headquater'
});