'ng-repeat'如何获得'unique`值

时间:2015-09-29 11:41:58

标签: angularjs ng-repeat angular-filters

使用数组,我试图过滤并在列表中显示unique信息。为此,我使用angular inbuild filter方法。

但我收到了错误。

这是我的尝试(我按SubProjectName过滤)

<ul>
    <li ng-repeat="project in projectNames | unique: 'SubProjectName' ">
        {project.SubProjectName}}
    </li>
</ul>

Live Demo

4 个答案:

答案 0 :(得分:20)

AngularJS默认不包含unique过滤器。您可以使用angular-filter中的一个。只需加入JavaScript

即可
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

并在您的应用中包含相关内容:

var app = angular.module('myApp', ['angular.filter']);

您的代码应立即生效!我编辑了您的Plunker,因此可以使用。

答案 1 :(得分:5)

我认为你正在寻找这样的答案

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.projectNames=projects
  $scope.Id = "1";
  $scope.SubProjectName="Retail Building";

})
.filter('unique', function() {
  return function(projects, subProjectName) {
    var newprojects =[];
    projects.forEach(function(project){
      if(project.SubProjectName === subProjectName)
        newprojects.push(project);
    });
    return newprojects;
  };
});
<li ng-repeat="project in projectNames | unique:SubProjectName">{{project.SubProjectName}}</li>

Demo

答案 2 :(得分:3)

您可能尝试使用的unique过滤器来自AngularUI,因此您需要包含它:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

并将其添加为模块依赖项:

var app = angular.module('plunker', ['ui.filters']);

答案 3 :(得分:1)

我已将您的plunkr更新为http://plnkr.co/edit/sx3u1ukH9752oR1Jfx6R?p=preview 添加过滤依赖

var app = angular.module('plunker', ['angular.filter']);

希望这可以帮到你