20

「ng-repeat」を含むアイテムのリストがあります。各アイテムには、リンク タイトルとリンク カテゴリを含む div が含まれます。カテゴリをクリックすると、そのカテゴリに属する​​アイテムのみが表示されるように、アイテムのリストをフィルター処理したいと考えています。どうすればそれを達成できますか？

これまでのところ、アイテムのリストがあります：

  <div class="link_line" ng-repeat="link in links | filter: ? ">
    <div class="title"><a href="{{link.url}}" target="_blank">{{link.title}}</a></div>
    <div class="category_label" ng-click="filterCategory(link)>{{ link.category }}</div>
  </div>

そしてコントローラには、リンクカテゴリでアラートを表示する関数「filterCategory」があります。そして、「フィルター：？」があります。フィルターの値が来なければならないと思います。これはコントローラー関数です：

  $scope.filterCategory = (link) ->
    alert(link.category)

続行する方法はありますか？ありがとう！

4

2 に答える 2

47

コントローラのスコープでフィルタリング用のオブジェクトを作成し、それをfilter式に渡すことができますng-repeat

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

app.controller('main', function($scope) {
    $scope.filters = { };

    $scope.links = [
        {name: 'Apple', category: 'Fruit'},
        {name: 'Pear', category: 'Fruit'},
        {name: 'Almond', category: 'Nut'},
        {name: 'Mango', category: 'Fruit'},
        {name: 'Cashew', category: 'Nut'}
    ];
});

これで、filtersオブジェクトがスコープにアタッチされました。のキーを取得するとcategory、filter式はオブジェクトが のキーを持ち、一致するかどうかに従って、オブジェクトを自動的にフィルタリングしますcategory。

詳細については、フィルタ ドキュメントの「パラメータ」セクションを参照してください。

したがって、HTML は次のようになります。

<div class="link_line" ng-repeat="link in links | filter:filters">
    <div class="title"><a href="{{link.url}}" target="_blank">{{link.title}}</a></div>
    <div class="category_label" ng-click="filters.category = link.category">{{ link.category }}</div>
</div>

これは、実際の動作の簡単なフィドルです。

于 2013-02-14T19:59:19.023 に答える
1 

angular.module('app',[])
  .controller('MainController', function($scope) { 
  $scope.team =[
    {cat_id:1,team: 'alpha'},
    {cat_id:2,team: 'beta'},
    {cat_id:3,team: 'gamma'}
               ];
  
    $scope.players = [
      {name: 'Gene',cat_id : 1},
      {name: 'George',cat_id : 2},
      {name: 'Steve',cat_id : 3},
      {name: 'Pzula',cat_id : 2},
      {name: 'shrikant',cat_id : 3}
    ];
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController"> 
    
<ul ng-repeat="(key, value) in team ">
{{value.team}}
  
 <li ng-repeat="p in players " ng-if="p.cat_id==value.cat_id">
   {{ p.name }}
 </li>
  
</ul>
</div>

于 2017-11-17T09:12:41.507 に答える