单击时的角度过滤器和顺序元素 [英] Angular filter and order elements on click

查看：24
本文介绍了单击时的角度过滤器和顺序元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试过滤项目列表(从 JSON 中抓取)onclick.我从服务器中提取了一次数据，然后想使用 Angular 过滤/排序元素.

这是我的 plunker:http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

  1. 标签 -- 我如何在点击时过滤/排序项目?最近"将按日期排序，热门"将按观看次数排序.
  2. 类别 -- 我正在使用 ng-click 来获取类别值，但不确定如何动态更新过滤器(使用传递给 onclick 的值).

谢谢

解决方案

我会将整个功能包装在父控制器中，并在该父控制器中使用选项卡更改和类别选择功能(子作用域将继承这一点)，以便可以为过滤器共享范围变量并按以下方式排序:

关于控制器继承的阅读材料:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

演示:http://plnkr.co/edit/rh3wGYhuoHSHJEa4PoQi?p=preview

HTML:

<div class="categories" ng-controller="CategoryController"><ul ng-repeat="类别中的类别"><li ng-click="sendCategory(category)">{{category.name}}</li>
<div class="tabs" ng-controller="tabsController"><ul><li ng-click="tab(1)">最近的项目</li><li ng-click="tab(2)">热门商品</li>

<div class="容器"><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)">查看完整的商品详情</a>

这是父控制器:

myApp.controller('ListController', function($scope, $route, $location, $http, Categories){$scope.sort = function(item) {如果( $scope.orderProp == '日期'){返回新日期(item.date);}返回项目[$scope.orderProp];}$scope.sendCategory = 函数(类别){//如何将此值传递给 ItemController?$scope.search =category.name;};$scope.orderProp='date';$scope.tab = 函数(tabIndex){//按日期排序如果(tabIndex == 1){//警报(tabIndex)；$scope.orderProp='date';}//按视图排序如果(tabIndex == 2){$scope.orderProp = '视图';}};})

** 更新 **

我已经更新了控制器以正确排序日期，因为它们需要首先被解析.

I'm trying to filter a list of items (grabbed from JSON) onclick. I pull the data once from the server then would like to filter/order the elements using Angular.

Here is my plunker: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

  1. Tabs -- How could I filter/sort the items onclick? "Recent" would be sorted by date and "Popular" would be sorted by views.
  2. Categories -- I'm using ng-click to grab the category value although not sure how to update the filter dynamically (using the value passed onclick).

Thanks

解决方案

I would wrap the entire functionality inside a parent controller with the tab change and category select functions inside that parent controller (the child scopes will inherit this) so that the scope variables can be shared down for the filters and order By:

Reading Materials on Controller Inheritance: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

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

Here is the parent controller:

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';
      }

   };

})

** Update **

I've updated the controller to sort the dates correctly since they need to be parsed first.

这篇关于单击时的角度过滤器和顺序元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆