Angular 1：根据对象属性过滤 ng-repeat 输出答案

【问题标题】：Angular 1: filter ng-repeat output depending on object propertyAngular 1：根据对象属性过滤 ng-repeat 输出
【发布时间】：2016-03-31 13:42:04
【问题描述】：

我的视图中有一个简单的 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" 属性中打印具有false 值的项目。

我已经尝试过了，但它会给我错误：ng-repeat only objects with specific property value - custom filter?

【问题讨论】：

只需使用ng-show :) 下面是我的答案

标签： angularjs

【解决方案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>

【讨论】：

【解决方案2】：

使用这个自定义过滤器

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>

【讨论】：

请问在什么地方放自定义过滤文件比较好？
我在应用程序的性能方面做了很多工作。在 Dev 环境 中，将所有 JS 文件放置在何处以及创建多少文件都无关紧要。我通常将所有过滤器放在模块级别的单独文件中。但在生产环境上尽量减少 HTTP 请求。为此，您必须缩小 JS 代码并将所有 JS 代码放入最多 2-3 个文件中。

【解决方案3】：

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

【讨论】：

是的，可以，您必须为此创建一个自定义filter，然后您就完成了

【解决方案4】：

为此使用angular filter plugin，更改您的代码，如下所示

注入

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

【讨论】：