Biorę dawno spóźniony warsztat kątowy i staram się przekonwertować stronę ze zwykłej funkcjonalności JQuery na Angular. Jedną z rzeczy, na których utknąłem, jest aktywowanie filtra za pomocą ng-click (przynajmniej myślę, że jest to preferowana metoda).Filtrowanie tabulatorów pod kątem
W zasadzie mam galerię i menu po lewej stronie z kategoriami (grupami) tych zdjęć w galerii. Grupy pokazują zgodnie z menu po lewej stronie. Tak więc 4 grupy (Dziewczęta, Natura, Muzyka, Kosmos). Obrazy są podzielone na te grupy. Jeśli będę naciskał na dziewczyny, powinienem zobaczyć tylko obrazy w grupie: dziewczyny, jeśli naciskam naturę, powinienem zobaczyć tylko zdjęcia w grupie: natura i tak dalej, Jeśli nacisnę wszystko, powinienem zobaczyć je wszystkie.
Cóż, to nie działa. Mimo że podążałem za tym How to filter a list in AngularJS using several links.
Oto wizualnej strony dać wyobrażenie
I tu jest mój kod
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>
Controller jeśli trzeba to zobaczyć
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;
};
}]);
danych
[
{
"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":""
}
]
Tylko w przypadku, gdy zastanawiasz się, co jest w sterowniku. Element galerii usunięcia, który również nie działa, ale jest to kolejne pytanie. I kilka funkcji, aby dodać aktywną klasę do menu, aby pokazać, kiedy jest aktywna.
Zgodnie z powyższym samouczkiem, w sterowniku nie ma potrzeby wykonywania operacji filtrowania, ponieważ wszystko jest zawarte w Angular po wyjęciu z pudełka.
EDIT
Wszelkie pomysły jak do tej pracy filetering z danymi oddzielonymi od pliku app.js.
Oto link dla codepen. Jak widać działa to, gdy umieszczę dane w pliku aplikacji, ale nie wtedy, gdy do niego zdalnie (jak powinno być) Czy muszę zbudować fabrykę? Wykomentuj dane w app.js i pozostawiać pilota do repo, który zawiera json i zdjęć i przekonaj się niepowodzeniem
prostu starał swój kod tutaj: https://jsfiddle.net/kqrpz2mq/ działa jak czar z grupy = przyrody, jedyny zostały wdrożone – yunandtidus
Uszczęśliwia mnie, że ostatecznie nie ma nic złego w filtrowaniu, ale nadal nie działa zgodnie z zamierzeniami. Dodałem codepen, który pokazuje, że działa, gdy dane są dodawane do pliku app.js, ale nie powiedzie się, gdy połączę się z moimi danymi zewnętrznymi. Potrzebuję rozdzielić dane. Ostatecznie te dane będą utrzymywane jako baza danych – LOTUSMS