2016-03-31 19 views
0

Görünümümde, verileri nesnelere basan basit bir yinelemeli var. Ben baskı şöyle duyuyorumAçısal 1: nesne özelliklerine bağlı olarak filtre tekrarı çıkışı

<div 
    ng-repeat="item in toDoItems | 
       orderBy: 'createdAt' 
       track by item.createdAt" 
    > 
    <b>Content:</b> {{item.content}} 
    </div> 

nesne:

 { 
     "content" : "some content", 
     "createdAt" : "1459401001460", 
     "completed" : false 
     }, 
     { 
     "content" : "some content", 
     "createdAt" : "1459401001325", 
     "completed" : true 
     } 

Sadece "completed" propery değerini false sahip öğeleri yazdırmak istiyorum.

Bunu denedim ama bana hata verecekti: ng-repeat only objects with specific property value - custom filter?

+0

sadece 'ng-show' :) aşağıda cevabım – manish

cevap

1

Eğer filtrenin bu formatı kullanabilirsiniz. ng-tekrarlamak iç

var myapp = angular.module('app', []); 
 
myapp.controller('Main', function ($scope) { 
 
    $scope.data =[ 
 
     { 
 
     "content" : "some content", 
 
     "createdAt" : "1459401001460", 
 
     "completed" : false 
 
     }, 
 
     { 
 
     "content" : "some content", 
 
     "createdAt" : "1459401001325", 
 
     "completed" : true 
 
     }, 
 
     { 
 
     "content" : "some content2", 
 
     "createdAt" : "1459401001460", 
 
     "completed" : false 
 
     }, 
 
     { 
 
     "content" : "some content", 
 
     "createdAt" : "1459401001325", 
 
     "completed" : true 
 
     }, 
 
     { 
 
     "content" : "some content3", 
 
     "createdAt" : "1459401001460", 
 
     "completed" : false 
 
     }, 
 
     { 
 
     "content" : "some content", 
 
     "createdAt" : "1459401001325", 
 
     "completed" : true 
 
     } 
 
]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app = "app"> 
 
    <div ng-controller="Main"> 
 

 
<div > 
 
    <table class="table table-bordered"> 
 
     <tr ng-repeat="d in data | filter: {completed: false }"> 
 
      <td>{{d.content}}</td> 
 
     </tr> 
 
    </table> 
 
</div> 
 
    </div> 
 
</div>

0
<b ng-show='item.completed==false'>Content:</b> 
<span ng-show='item.completed==false'>{{item.content}}</span> 
+0

o filtreli yapılabilir kullanmak? – Kunok

+0

evet, bunun için özel bir 'filtre 'oluşturmalısınız ve işiniz bittiğinde – manish

0

bunun için kullanın angular filter plugin aşağıya

gibi kodunuzu değiştirin enjekte

<div 
     ng-repeat="item in toDoItems | filterBy: ['completed']: true | 
        orderBy: 'createdAt' 
        track by item.createdAt" 
     > 
     <b>Content:</b> {{item.content}} 
     </div> 
1

kullanın Bu özel filtre

app.filter('myFilter', function() { 
    return function (items) { 
     if (!items) { 
      return true; 
     } 
     if (items.length == 0) { 
      return items; 
     } 
     var newItems = []; 
     angular.forEach(items, function(item, index){ 
      if(item.completed==true || item.completed=='true'){ 
       newItems.push(item) 
      } 
     }) 
     return newItems ; 
    }; 
}); 

Ve HTML:

<div ng-repeat="item in toDoItems | myFilter track by $index"> 
     <b>Content:</b> {{item.content}} 
    </div> 
+0

Özel filtre dosyalarını koymak için iyi bir yer olduğunu sorabilir miyim? – Kunok

+1

Uygulamanın performansında çok çalıştım. On ** Dev ortamı **, tüm JS dosyalarını nereye yerleştirdiğinizden ve kaç dosya oluşturduğunuzdan önemli değildir. Genel olarak tüm filtreleri ayrı dosyalar halinde modül düzeyinde yerleştiririm. Ancak ** üretim ortamında ** HTTP isteklerini en aza indirmeye çalışın. Bunun için JS kodunu küçültmeniz ve tüm JS kodunuzu maksimum 2-3 dosyaya yerleştirmeniz gerekmektedir. –

İlgili konular