根據選擇的值在angularjs中過濾結果

這看起來應該很容易，但我對角度並不熟悉，並且不太瞭解這個概念。我希望在數據集上運行ng-repeat，然後使用完全相同的數據集，根據選擇框中的選定選項篩選結果。根據選擇的值在angularjs中過濾結果

我已經創建了一個選項數組，並將它們賦值給變量$ scope.OurTeamCategories。

angular.module('app', []) 
.controller('Main', ['$scope', function($scope) { 
    $scope.ourTeamCategories = [ 
     {"id":18,"title":'Management'}, 
     {"id":19,"title":'Administration'}, 
     {"id":21,"title":'Designers'}, 
     {"id":22,"title":'Accounts'}, 
    ] 
}]);

然後在HTML文件中，我使用ng-options動態創建選擇框並使用ng-repeat創建這些類別的列表。這一切工作正常，但現在我希望能夠過濾

<div ng-app="app"> 
    <div ng-controller="Main"> 
    <select name="show-filter" ng-model="catFilter" ng-options="category.title for category in ourTeamCategories"> 
      <option value="{{category.id}}"></option> 
     </select> 

    <li ng-repeat="cat in ourTeamCategories"> 
     <h3>{{cat.title}}</h3> 
     <!-- for testing --> 
    <b>input: {{catFilter.id}}</b> - - ID: {{cat.id}} 
    </li> 
    </div> 
</div>

我想我能以下列方式運行一個過濾器，但我得到一個錯誤。誰能告訴我我做錯了什麼？

<li ng-repeat="cat in ourTeamCategories | filter {cat.id:catFilter.value}">

我創建這裏plunker：http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

來源

2015-06-18 Starfs

你需要提及你的文件管理器一樣id直接的ID將查找通過ourTeamCategories ID &更精確的結果都在末尾添加true將確保精確匹配，而不是包含&也錯過了結腸:

<li ng-repeat="cat in ourTeamCategories | filter : {id: catFilter.id}: true">

更新

您正在混合使用兩種方法，如ng-options與ng-repeat。我想你應該堅持ng-options，所以在當前的NG-選項，在您的ng-model

<select name="show-filter" ng-model="catFilter" 
    ng-options="category as category.title for category in ourTeamCategories"> 
</select>

Forked Plunkr這裏

來源

2015-06-18 17:50:39

由於設置title價值！我認爲你和idursun的評論都是有效的，錯誤已經消失。但是，在選擇相關的選擇選項後，它似乎仍不想過濾。 – Starfs

@Starfs看看我的更新答案.. –

我實際上是用我當前的選擇代碼將期望值輸入到選擇選項中。值爲18,19,21,22。當我應用更新時，選擇選項值現在爲0,1,2,3，這與我試圖完成的過濾無關。 – Starfs

你需要filter後一個冒號。試試這個：

filter: {cat.id:catFilter.value}

來源

2015-06-18 17:48:24 idursun

根據選擇的值在angularjs中過濾結果

回答

相關問題