Uzun bir gecikmiş Açısal atölye alıyorum ve bir sayfayı normal JQuery'den Angular işlevselliğine dönüştürmeye çalışıyorum. Sıkıştığım şeylerden biri, ng tıklama ile bir filtrenin etkinleştirilmesidir (en azından tercih edilen yöntem olduğunu düşünüyorum).Açılı olarak filtrelenmiş sekme
Temelde galeride bu resimlerin kategorileri (grupları) ile solda bir galeri ve bir menü var. Gruplar soldaki menüye göre gösterir. Yani, 4 grup (Kızlar, Doğa, Müzik, Uzay). Görüntüler bu gruplara ayrılmıştır. Eğer kızlara bastığımda, sadece gruptaki görüntüleri görmeliyim: kızlar, eğer doğaya bastığımda, sadece gruptaki resimleri görmeliyim: doğa ve diğerleri, Eğer All tuşuna basarsam hepsini görmeliyim.
Pekala, işe yaramıyor. Bunu How to filter a list in AngularJS using several links takip etsem bile. bunu
olmak istersen Burada kodumHTML
<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>
Kontrolör bir fikre
vermesi için sayfanın bir görseldir Ve burada
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;
};
}]);
Eğer denetleyici içinde ne olduğunu merak ediyorsanız Her ihtimale karşı Veri
[
{
"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":""
}
]
. Ya da workig olmayan bir galeri öğesi kaldırmak, ama bu başka bir soru için. Ve aktif sınıfı menüye eklemek için bir kaç fonksiyon var, böylece aktif olduğunda gösterir.
Yukarıdaki öğreticiye göre, denetleyicide filtreleme işini yapmak için hiçbir şey yoktur, çünkü bunların hepsi kutudan Açısal olarak dahil edilmiştir.
DÜZENLEME
app.js dosyadan ayrılan verilerle bu filetering iş nasıl herhangi bir fikir.
Bir kod satırı için bir link. Görebildiğiniz gibi, veriyi uygulama dosyasına koyduğumda, ancak uzaktan kestiremediğimde işe yarayacaktır (gerektiği gibi) Bir fabrika inşa etmem gerekiyor mu? app.js verileri dışında açıklama ve json ve görüntüleri içeren bir repoya uzaktan bırakın ve ben benzer burada bir cevap ekliyorum OP talebi üzerine
cross orign hata Sadece burada kodunuzu çalıştı görebilirsiniz: https://jsfiddle.net/kqrpz2mq/ grubun = doğa, Uyguladığınız sadece biriyle bir cazibe gibi çalışır – yunandtidus
Nihayetinde filtrelemede nihayetinde yanlış bir şey olmadığını görmek beni mutlu ediyor, ama yine de amaçlandığı gibi çalışmıyor. Veriler app.js dosyasında eklendiğinde çalıştığını gösteren bir kod ekledim ancak verilerime harici olarak bağlandığımda başarısız oluyor. Ayrılacak veriye ihtiyacım var. Sonunda bu veri bir veritabanı – LOTUSMS