angularjs - reactivos - tablas angular 4

Filtro angular y elementos de pedido al hacer clic

Question

Estoy tratando de filtrar una lista de elementos (tomados de JSON) onclick. Extraigo los datos una vez del servidor y luego me gustaría filtrar / ordenar los elementos usando Angular.

Aquí está mi plunker: http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

1. Pestañas - ¿Cómo puedo filtrar / ordenar los elementos con un clic? "Reciente" se ordenaría por fecha y "Popular" se ordenaría por vistas.
2. Categorías - Estoy usando ng-clic para tomar el valor de la categoría, aunque no estoy seguro de cómo actualizar el filtro de forma dinámica (usando el valor pasado al hacer clic).

Gracias

Answer 1

Envolvería toda la funcionalidad dentro de un controlador principal con las funciones de cambio de pestaña y selección de categoría dentro de ese controlador padre (los ámbitos secundarios lo heredarán) para que las variables de ámbito puedan compartirse para los filtros y el orden Por:

Materiales de lectura sobre la herencia del controlador: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

Demostración: 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>

Aquí está el controlador principal:

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

   };

})

** Actualización **

Actualicé el controlador para ordenar las fechas correctamente, ya que primero deben analizarse.