点击类别链接时,项目的筛选器列表 [英] filter list of items when clicking category link
问题描述
我有一个项目为NG重复列表。每个项目包含一个链接标题和链接类别的div。当一个类别点击,我要过滤的项目的列表,因此,它仅示出了属于该类别的项目。我怎样才能做到这一点?
I have a list of items with "ng-repeat". Each item contains a div with a link title and link category. When clicking on a category, I want to filter the list of items, so that it only shows the items belonging to that category. how can I achieve that?
到目前为止,我有一个项目列表:
So far I have a list of items:
<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,它显示了与链路类别警报。和我有过滤器?在这里我想过滤器的值有来。 THS是控制器的功能:
And in the controller I have a function "filterCategory" which shows an alert with the link category. And I have the "filter: ?" where I guess the value of the filter has to come. Ths is the controller function:
$scope.filterCategory = (link) ->
alert(link.category)
不知道如何进行呢?谢谢!
Any idea how to proceed? Thanks!
推荐答案
您可以创建用于过滤功能控制器的范围对象,并把它传递给过滤器
前$ p中$ pssion NG-重复
You can create an object on your controller's scope intended for filtering and pass it to the filter
expression in 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'}
];
});
所以现在我们有一个过滤器
对象连接到的范围。如果它获得类别
的一个键,过滤器
前pression会根据是否自动过滤的对象他们不具有类别
的关键,它相匹配。
So now we have a filters
object attached to the scope. If it gets a key of category
, the filter
expression will automatically filter the objects according to whether or not they have a key of category
and it matches.
有关详细信息,看过滤文档的参数一节。
For more details, look at the "Parameters" section of the filter docs.
所以你的HTML可能看起来像:
So your HTML could look like:
<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>
下面是这个动作快速小提琴。
这篇关于点击类别链接时,项目的筛选器列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!