Yếu tố bộ lọc và trật tự góc trên nhấp chuột

Question

Tôi đang cố gắng lọc danh sách các mục (nắm lấy từ JSON) khi nhấp vào. Tôi kéo dữ liệu một lần từ máy chủ sau đó muốn lọc/sắp xếp các phần tử bằng Angular.

Đây là plunker tôi: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

1. Tabs - Làm thế nào tôi có thể lọc/sắp xếp các mục onclick? "Gần đây" sẽ được sắp xếp theo ngày và "Phổ biến" sẽ được sắp xếp theo lượt xem.
2. Danh mục - Tôi đang sử dụng ng-click để lấy giá trị danh mục mặc dù không chắc chắn cách cập nhật bộ lọc động (sử dụng giá trị được truyền onclick).

Cảm ơn

Answer 1

tôi sẽ quấn toàn bộ chức năng bên trong một bộ điều khiển cha mẹ với sự thay đổi tab và loại chức năng chọn bên trong điều khiển cha mẹ (phạm vi con sẽ kế thừa này) do đó các biến phạm vi có thể được chia sẻ xuống cho các bộ lọc và trật tự bởi:

liệu Reading trên điều khiển thừa kế: 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> 

Dưới đây là bộ điều khiển cha mẹ:

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 **

Tôi đã cập nhật bộ điều khiển để sắp xếp ngày một cách chính xác bởi vì họ cần phải được phân tích Đầu tiên.