加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 点击时的角度过滤器和订单元素

发布时间:2020-12-17 18:08:18 所属栏目:安全 来源:网络整理
导读:我正在尝试过滤一个项目列表(从 JSON中抓取)onclick.我从服务器提取数据一次,然后想使用Angular过滤/排序元素. 这是我的傻瓜:http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview 标签 – 如何对项目进行过滤/排序? “Recent”将按日期排序,“Popular”
我正在尝试过滤一个项目列表(从 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';
      }

   };

})

**更新**

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读