2016-11-11 35 views
7

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

kodum

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> 

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

enter image description here

+0

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

+0

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

cevap

7

yenilmesi Soruları için başka bir tane yazdım. OP için

Not - belki sorun galleryController İşaretlemenize yere tanımlandığını olduğunu düşünüyorum biraz araştırma yaptıktan sonra bu kadar gelecek okuyucular


:-) karışıklığa neden olmaması düzenlemek ancak galerideki öğeler, denetleyicinin tanımlandığı yerin içinde değildir.

http://joli.sitedev.online/#/gallery. SlaytlarController dosyasında.js galleryController Burada bir mola koymak tanımlanır ve kod duraklar burada:

enter image description here

Ben de burada bir kırılma noktası koymak ancak bir silme düğmesi tıklandığında kod duraklatmaz:

enter image description here

Ben ng-controller="galleryController" belirtisi göremiyorum biçimlendirme baktığımızda

yüzden ng-repeat içinde galerileri doldurulur nasıl göremiyorum:

enter image description here

Belki bu geçer:

enter image description here

o aracılığıyla olduğunu direktif kendi denetleyici olduğu gibi o zaman şeyleri açıklamak istiyorsanız. Daha fazla bilgi yardımcı olabilir ve eminim bunu temizleyebiliriz.

+0

Noktası alınmış olarak korunacaktır. Diğer soruya verdiğiniz cevap bunun için geçerlidir ama aynı değiller. Ancak, buraya gelebilecek olanlar bu soruna bu cevabı yararlı bulacaktır. Teşekkürler tekrar bud! – LOTUSMS

1
çünkü Çapraz kökenli kaynak paylaşımı (CORS) alanın dışından başka bir etki talep edilecek bir web sayfasında kısıtlı kaynakları (örn yazı) sağlayan bir mekanizmadır

çapraz orign taşımaktadır

hangi kaynak oluşturuldu. 1 Bir web sayfası görüntüleri, stil sayfalarını, komut dosyalarını, iframe'leri, videoları serbestçe gömebilir. [2] Bazı "alanlar arası" talepler, özellikle de AJAX talepleri, aynı menşe güvenlik politikası tarafından varsayılan olarak yasaklanmıştır.

tarayıcınızı Inspet Eğer

+0

http://plnkr.co/edit/ajiIESeZ8u0f0koa8LJt?p=info – nmanikiran