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

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

问题描述

我试图过滤一列项目(从JSON抓取)onclick。我从服务器中取出数据,然后想要使用Angular过滤/排序元素。



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


  1. 标签 - 如何过滤/排列onclick项目? 最近将按日期排序,流行将按照视图排序。 类别 - 我使用ng-click来获取类别值,虽然不知道如何动态更新过滤器(使用传递的值onclick)。


    谢谢

范围变量可以共享下来的过滤器和顺序通过:

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



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

HTML:

 < div ng-controller =ListController > 
< div class =categoriesng-controller =CategoryController>
< ul ng-repeat =分类中的分类>
< li ng-click =sendCategory(category)> {{category.name}}< / li>
< / ul>
< / div>

< div class =tabsng-controller =tabsController>
< ul>
< li ng-click =tab(1)>最近的项目< / li>
< li ng-click =tab(2)>热门项目< / li>
< / ul>
< / div>

< div class =container>
< div class =leftng-controller =ItemController>
< div class =itemList>
< div class =itemng-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>
< / 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){
//如何将此值传递给ItemController
$ scope.search = category.name ;
};

$ scope.orderProp ='date';
$ b $ scope.tab = function(tabIndex){
//排序日期
if(tabIndex == 1){
// alert(tabIndex);
$ scope.orderProp ='date';

}
如果(tabIndex == 2){
$ scope.orderProp ='views';
}

};

$)

**更新**



我已经更新了控制器来正确排序日期,因为他们需要首先解析。


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天全站免登陆