角1：オブジェクトのプロパティに応じてng-repeat出力をフィルタします。

Question

オブジェクトからのデータを出力する単純なng-repeatがビュー内にあります。私は、印刷は、次のようになりますよ

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

オブジェクト：

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

は私だけ"completed" properyの値falseを持っているアイテムを印刷したいです。私はこれを試してみましたが、それは私にエラー与えるだろう

：このためng-repeat only objects with specific property value - custom filter?

Answer 1

あなたは、フィルタのこのフォーマットを使用することができます。

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>

Answer 2

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

Answer 3

使用angular filter pluginを、のような

の下にあなたのコードを変更して注入する

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

Answer 4

このカスタムフィルタ

を使用します

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 ; 
    }; 
}); 

そして、あなたのHTMLは次のとおりです。

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