如何使用 Angular JS 在自定义过滤器中使用唯一值？答案

【问题标题】：How to use unique value in custom filter using Angular JS?如何使用 Angular JS 在自定义过滤器中使用唯一值？
【发布时间】：2017-02-01 15:26:20
【问题描述】：

如何使用 Angular JS 获得独特的价值？

我想获得最近修改日期的唯一名称

在此代码中现在我在控制器中创建了一个自定义过滤器，它可以遍历我的 ng-repeat 中的项目并仅返回满足特定条件的项目

这是我的 JS 代码

var app = angular.module('app', []);
app.filter('lsnPlanLog', function() {
    return function(items) {
        var filtered = [];

        angular.forEach(items, function(el) {
          if(el.modifiedBy && el.modifiedOn) {
        el.meta.createdBy.name = el.meta.modifiedBy.name;
        el.meta.createdBy.id = el.meta.modifiedBy.id;
        el.createdOn = el.modifiedOn;
          }
        });

        for(var i = 1; i < items.length; ){
          if(items[i-1].meta.createdBy.id == items[i].meta.createdBy.id){
        items.splice(i, 1);
          } else {
              i++;
          }
        }
    return items;
  }
});

app.controller('ctrl',function($scope){

$scope.lsnPlanDailysLog = [
     {
     "id":"588f6347d991391aeae10c5b",
     "createdOn":"03-Feb-2017 12:59 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedOn":"03-Feb-2017 12:59 AM",
     "meta":{
        "id":"588f6347d991391aeae10c5b",
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        },
        "modifiedBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      },
      {
     "id":"588f73b7d991391aeae10c5c",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"56b9e986b3cb1f000125c4d1",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"588f73b7d991391aeae10c5c",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"588f7778d991391aeae10c5d",
     "createdOn":"04-Feb-2017 01:03 AM",
     "createdBy":"56b9e986b3cb1f000125c4d1",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"04-Feb-2017 01:03 AM",
     "meta":{
        "id":"588f7778d991391aeae10c5d",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"58938605d991390e8040cd4b",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"58938605d991390e8040cd4b",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"5893861cd991390e8040cd4c",
     "createdOn":"03-Feb-2017 12:58 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"56b9e986b3cb1f000125c4d1",
     "modifiedOn":"03-Feb-2017 12:58 AM",
     "meta":{
        "id":"5893861cd991390e8040cd4c",
        "createdBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        },
        "modifiedBy":{
           "name":"Rahul Dravid",
           "id":"56b9e986b3cb1f000125c4d1"
        }
     }
      },
      {
     "id":"5893862ed991390e8040cd4d",
     "createdOn":"04-Feb-2017 01:00 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedBy":"534ceeaae4b0aeb8292ed6cf",
     "modifiedOn":"04-Feb-2017 01:00 AM",
     "meta":{
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        },
        "modifiedBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      },
      {
     "id":"5894dacdd991390e8040cd4e",
     "createdOn":"04-Feb-2017 01:02 AM",
     "createdBy":"534ceeaae4b0aeb8292ed6cf",
     "meta":{
        "id":"5894dacdd991390e8040cd4e",
        "createdBy":{
           "name":"Sachin Tendulakar",
           "id":"534ceeaae4b0aeb8292ed6cf"
        }
     }
      }
]

})



<div ng-app="app" ng-controller="ctrl">
<table class="table table-condensed table-striped"" style="width: 100%;" ng-if="lsnPlanDailysLog!=undefined && lsnPlanDailysLog.length > 0">
    <thead>
        <tr>
            <th style="text-align: center;color: teal;width: 10%;">#</th>
            <th style="color: teal;width: 20%;text-align: center;">Type</th>
            <th style="color: teal;width: 20%;text-align: center;">Last updated by</th>
            <th style="color: teal;width: 20%;text-align: center;">Last updated date</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="eachLsnPlanDailyLog in lsnPlanDailysLog | orderBy:['-createdOn','-modifiedOn'] | lsnPlanLog">
            <td style="text-align: center;">{{$index+1}}</td>
            <td style="width: 20%;text-align: center;">LSN Plan Delivery</td>
            <td style="width: 20%;text-align: center;">{{eachLsnPlanDailyLog.meta.createdBy.name}}</td>
            <td style="width: 20%;text-align: center;">{{eachLsnPlanDailyLog.createdOn}}</td>
        </tr>
    </tbody>
</table>
</div>

这是我获取上述代码的输出

#      Type             Last updated by     Last updated date

1   LSN Plan Delivery   Rahul Dravid            04-Feb-2017 01:03 AM

2   LSN Plan Delivery   Sachin Tendulakar   04-Feb-2017 01:02 AM

3   LSN Plan Delivery   Rahul Dravid            03-Feb-2017 12:58 AM

我的预期输出低于 1

#      Type             Last updated by     Last updated date

1   LSN Plan Delivery   Rahul Dravid            04-Feb-2017 01:03 AM

2   LSN Plan Delivery   Sachin Tendulakar   04-Feb-2017 01:02 AM

【问题讨论】：

标签： angularjs

【解决方案1】：

我认为在比较之前您首先需要通过createdBy 订购：

 items[i-1].meta.createdBy.id == items[i].meta.createdBy.id

【讨论】：

【解决方案2】：

首先使用orderBy 来获取按上次修改时间排序的列表，就像您已经在做的那样，然后使用某种类型的唯一过滤器，例如this angular ui filter，或者查看this question 一些更多独特性的想法和功能。所以，它可能看起来像这样：

<table>
    <tbody>
        <tr ng-repeat="eachLsnPlanDailyLog in lsnPlanDailysLog | orderBy:['-createdOn','-modifiedOn'] | unique:'modifiedBy'">
             <!-- Your content -->
        </tr>
    </tbody>
</table>

【讨论】：