it-swarm.com.de

Filterergebnisse in Angulars basierend auf dem ausgewählten Wert

Dies scheint einfach zu sein, aber ich bin neu in angular und verstehe dieses Konzept nicht sehr gut. Ich hoffe, eine ng-Wiederholung über einen Datensatz ausführen zu können und dann in der Lage zu sein, die Ergebnisse zu filtern basierend auf einer ausgewählten Option in einem Auswahlfeld, wobei genau derselbe Datensatz verwendet wird.

Ich habe eine Reihe von Optionen erstellt und sie der Variablen $ scope.OurTeamCategories zugewiesen.

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'},
    ]
}]);

Dann erstelle ich in der HTML-Datei dynamisch das Auswahlfeld mit ng-options und erstelle mit ng-repeat eine Liste dieser Kategorien. Das alles funktioniert gut, aber jetzt möchte ich filtern können

<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>

Ich dachte, ich könnte einen Filter folgendermaßen ausführen, aber es wird eine Fehlermeldung angezeigt. Kann mir jemand sagen, was ich falsch mache?

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

Ich habe hier einen Plunker erstellt: http://plnkr.co/edit/YwHknAm3X2NUdxDeUjS8?p=preview

12
Starfs

Sie müssen in Ihrem Filer eine direkte ID wie id angeben, die durch ourTeamCategories id nachgeschlagen wird. Wenn Sie ein genaueres Ergebnis erzielen möchten, fügen Sie true am Ende hinzu, um die exakte Übereinstimmung zu gewährleisten als enthält & auch Doppelpunkt verpasst :

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

Update

Sie mischen zwei Ansätze gleichzeitig wie ng-options Mit ng-repeat. Ich denke, Sie sollten bei ng-options Bleiben, also in Ihrer aktuellen ng-Option, die title Wert in Ihrem ng-model Setzt.

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

Plunkr hier

18
Pankaj Parkar

Sie benötigen einen Doppelpunkt nach filter. Versuche dies:

filter: {cat.id:catFilter.value}

2
idursun