我正在尝试过滤一个项目列表(从
JSON中抓取)onclick.我从服务器提取数据一次,然后想使用Angular过滤/排序元素.
这是我的傻瓜：http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview
>标签 – 如何对项目进行过滤/排序？ “Recent”将按日期排序,“Popular”将按视图排序.
>类别 – 我使用ng-click来获取类别值,但不确定如何动态更新过滤器(使用传递的值).
谢谢
解决方法
我会将整个功能包装在父控制器中,并使用该父控制器中的选项卡更改和类别选择函数(子范围将继承此项),以便可以为过滤器共享范围变量并按顺序依次：
读取控制器继承的材料：http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller
演示：http://plnkr.co/edit/rh3wGYhuoHSHJEa4PoQi?p=preview
HTML：
<div ng-controller="ListController">
<div class="categories" ng-controller="CategoryController">
<ul ng-repeat="category in categories">
<li ng-click="sendCategory(category)">{{category.name}}</li>
</ul>
</div>
<div class="tabs" ng-controller="tabsController">
<ul>
<li ng-click="tab(1)">Recent items</li>
<li ng-click="tab(2)">Popular items</li>
</ul>
</div>
<div class="container">
<div class="left" ng-controller="ItemController">
<div class="itemList">
<div class="item" ng-repeat="item in items | filter:search | orderBy:sort">
<h3 ng-click="viewDetail(item)">{{item.title}} - {{item.date}}</h3>
<p>{{item.description}}</p>
<a ng-click="viewDetail(item)">View full item details</a>
</div>
</div>
</div>
</div>
</div>
这是父控制器：
myApp.controller('ListController',function($scope,$route,$location,$http,Categories){
$scope.sort = function(item) {
if ( $scope.orderProp == 'date') {
return new Date(item.date);
}
return item[$scope.orderProp];
}
$scope.sendCategory = function(category) {
// How can I pass this value to ItemController?
$scope.search =category.name;
};
$scope.orderProp='date';
$scope.tab = function (tabIndex) {
//Sort by date
if (tabIndex == 1){
//alert(tabIndex);
$scope.orderProp='date';
}
//Sort by views
if (tabIndex == 2){
$scope.orderProp = 'views';
}
};
})
**更新**
我已经更新了控制器以正确排序日期,因为它们需要先被解析.
