Köşeli süzgeç ve sipariş öğeleri

Question

adresinde tıklatıldığında, öğelerin listesini (JSON'dan yakalanan) onclick'e filtrelemeye çalışıyorum. Verileri sunucudan bir kere çekiyorum, sonra Angular kullanarak öğeleri filtrelemek/sipariş etmek istiyorum. http://plnkr.co/edit/glSz1qytmdZ9BQfGbmVo?p=preview

1. Tabs - Nasıl/süzgeç onclick öğeleri sıralamak: Burada

   benim plunker nedir? "Son", tarihe göre sıralanır ve "Popüler", görünümlere göre sıralanır.

2. Kategoriler - Filtreyi dinamik olarak nasıl güncelleyeceğimi bilmemekle birlikte (bu değer, onclick değerini kullanarak) kategori değerini elde etmek için ng tuşunu kullanıyorum.

Teşekkür

Answer 1

kapsam değişkenleri aşağı paylaşılabilir böylece (çocuk kapsamları bu devralır) o ana denetleyici içinde sekme değişikliği ve kategori seçme fonksiyonları ile bir üst denetleyici içinde tüm işlevselliği örtecek

Okuma Malzemeleri Denetleyicisindeki Kalıtım: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

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

By filtreleri ve sipariş için

HTML:

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

    }; 

}) 

** Güncelleme

ben ihtiyaç duydukları beri doğru tarihleri ​​sıralamak için denetleyici güncelledik

ayrıştırılmasına **: Burada

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

ebeveyn kontrol cihazıdır ilk.