「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」があります。また、フィルターの値が来ると思われる「filter: ?」があります。これがコントローラー関数です。
$scope.filterCategory = (link) ->
alert(link.category)
どのように進めればよいか、何かアイデアはありますか? ありがとうございます!
ベストアンサー1
フィルタリング用のオブジェクトをコントローラのスコープに作成し、それを式に渡すことができます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>