帶角度的選項卡過濾

我正在採取一個早該過期的Angular研討會，並試圖將常規JQuery的頁面轉換爲Angular功能。我堅持的一件事是用ng-click激活一個過濾器（至少我認爲這是首選方法）。帶角度的選項卡過濾

所以基本上我有一個畫廊和一個菜單左側的圖庫中的這些圖像的類別（組）。小組根據左邊的菜單顯示。所以，4組（女孩，自然，音樂，空間）。圖像被分成這些組。如果我按下女孩，我應該只看到小組中的圖像：女孩，如果我按大自然，我只能看到羣組中的照片：大自然等，如果我按全部，我應該看到他們。

嗯，它不工作。儘管我遵循這個How to filter a list in AngularJS using several links。

這裏是一個可視化的頁面給一個想法

這裏是我的代碼

HTML

<div class="content-body" ng-controller="galleryController as panel"> 
    <div class="col-xs-12 col-md-3"> 
    <div class="content-sidebar"> 
     <div class="side-widget menu"> 
     <h4>Groups:</h4> 
     <div class="border-bottom"> 
      <ul ng-init="tab = 1" class="list-group"> 
      <li ng-class="{active:panel.isSelected(1)}"> 
       <a class="list-group-item" ng-click="panel.selectTab(1); groupFilter = {}">All <span 
              class="badge badge-primary">12</span></a> 
      </li> 
      <li ng-class="{active:panel.isSelected(2)}"> 
       <a class="list-group-item" ng-click="panel.selectTab(2); groupFilter ={group:'nature'}">Nature <span 
               class="badge badge-success">7</span></a> 
      </li> 
      <li ng-class="{active:panel.isSelected(3)}"> 
       <a class="list-group-item" ng-click="panel.selectTab(3)">Music <span 
               class="badge badge-danger">3</span></a> 
      </li> 
      <li ng-class="{active:panel.isSelected(4)}"> 
       <a class="list-group-item" ng-click="panel.selectTab(4)">Space <span 
               class="badge badge-info">2</span></a> 
      </li> 
      <li ng-class="{active:panel.isSelected(5)}"> 
       <a class="list-group-item" ng-click="panel.selectTab(5)">Girls <span 
               class="badge badge-warning">3</span></a> 
      </li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-9"> 
    <div class="gallery"> 
     <div> 
     <div class="col-xs-12 col-md-3" ng-repeat="gallery in galleries | filter:groupFilter"> 
      <a class="gallery-item" ng-href="{{gallery.img}}" ng-class="{true:'active',false:''}[checked]" 
       title="Nature Image 1" > 
       <div class="image"> 
        <img ng-src="{{gallery.img}}" alt="Nature Image 1"/> 

       </div> 
       <div class="meta"> 
        <strong>{{gallery.title}}</strong> 
        <span>{{gallery.desc}}</span> 
       </div> 
      </a> 
      <ul class="gallery-item-controls"> 
       <li><label class="check"><input type="checkbox" class="icheckbox" ng-model="checked" /></label></li> 
       <li><span class="gallery-item-remove"><i class="fa fa-times" ng-click="removeGalleryItem(galleryItem, $event)"></i></span></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

的控制器，如果你需要看到它

app.controller('galleryController', ['$scope', '$http', function($scope, $http) { 
    $http.get('data/galleries.json').success(function(data){ 
     $scope.galleries = data; 
    }); 

    $scope.removeGalleryItem=function(gallery){ 
     var removedGallery = $scope.galleries.indexOf(gallery); 
     $scope.galleries.splice(removedGallery, 1); 
    }; 

    this.tab = 1; 

    this.selectTab = function(setTab){ 
     this.tab = setTab; 
    }; 

    this.isSelected = function(checkTab){ 
     return this.tab === checkTab; 
    }; 



}]);

的數據

[ 
{ 
    "img":"assets/images/gallery/girls-1.jpg", 
    "group": "girls", 
    "title": "Image 1", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/girls-2.jpg", 
    "group": "girls", 
    "title": "Image 2", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/girls-3.jpg", 
    "group": "girls", 
    "title": "Image 3", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-1.jpg", 
    "group": "music", 
    "title": "Image 4", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-2.jpg", 
    "group": "music", 
    "title": "Image 5", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-3.jpg", 
    "group": "music", 
    "title": "Image 6", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-4.jpg", 
    "group": "music", 
    "title": "Image 7", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/music-5.jpg", 
    "group": "music", 
    "title": "Image 8", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-1.jpg", 
    "group": "nature", 
    "title": "Image 9", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-2.jpg", 
    "group": "nature", 
    "title": "Image 10", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-3.jpg", 
    "group": "nature", 
    "title": "Image 11", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-4.jpg", 
    "group": "nature", 
    "title": "Image 12", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-5.jpg", 
    "group": "nature", 
    "title": "Image 13", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-6.jpg", 
    "group": "nature", 
    "title": "Image 14", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/nature-7.jpg", 
    "group": "nature", 
    "title": "Image 15", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/space-1.jpg", 
    "group": "space", 
    "title": "Image 16", 
    "desc": "Description", 
    "link":"" 
}, 
{ 
    "img":"assets/images/gallery/space-2.jpg", 
    "group": "space", 
    "title": "Image 17", 
    "desc": "Description", 
    "link":"" 
} 
]

以防萬一你想知道什麼是在控制器中。一個刪除畫廊項目也不工作，但這是另一個問題。還有一些功能可以將活動類添加到菜單中，以便顯示它何時處於活動狀態。

根據上面的教程，控制器中沒有任何東西需要過濾工作，因爲它全部包含在Angular中。

編輯
任何想法如何使從app.js文件中分離數據這filetering工作。

這是一個碼簿的link。正如你可以看到它的工作原理，如果我把數據放在應用程序文件中，但不是當我遠程它（因爲它應該是）我需要建立一個工廠？在app.js註釋掉數據和遠程離開到包含JSON和圖像的回購，看到它失敗