Remove duplicate from ng-repeat

Question

I have a very simple array that has duplicate values. My array is like this:

$scope.type= ["Bar", "Pie", "Line", "Line", "Line", "Line", "Line", "Line", "map", "Line", "Bar", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie"]

in my ng-repeat, I have this condition

ng-repeat = types in type track by $index

How can I display only the unique values from my array in ng-repeat?

is this really a duplicate? this question is about an angularjs filter but the suggested duplicate is about a pure JavaScript array. Yes, helpful a JavaScript question will not provide an angularjs filter as its answer. I have just used the A below and its worked very well. — Steve Drake, Nov 15 '18 at 11:26

score 7 · Accepted Answer · answered Mar 13 '18 at 03:31

7

You can use unique filter while using ng-repeat.

ng-repeat="type in types|unique: type"

var app = angular.module('myApp',['ui.directives', 'ui.filters']);
app.controller("myCtrl", function($scope) {
  $scope.types = ["Bar", "Pie", "Line", "Line", "Line", "Line", "Line", "Line", "map", "Line", "Bar", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie"];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="type in types|unique: type">{{type}}</div>
</body>

answered Mar 13 '18 at 03:31

Hassan Imam

21,956
5
41
51

ng-repeat="type in charttype track by $index " My ng-repeat has track by – bleyk Mar 13 '18 at 03:42
3

If you use `track by $index` then `unique` won't work. – Hassan Imam Mar 13 '18 at 03:46
1

ok, I used unique and its working now, thanks! – bleyk Mar 13 '18 at 05:05

score 1 · Answer 2 · answered Mar 13 '18 at 03:19

1

If you don't want to include Lodash, you can do this:

$scope.typeUnique = Object.keys($scope.type.reduce((acc, val) => { acc[val] = true; return acc; }, {}));

answered Mar 13 '18 at 03:19

kshetline

12,547
4
37
73

Sangram Badi · Answer 3 · 2018-03-13T03:27:29.387

0

Use lodash for convert your array to unque element array

$scope.type = _.uniq($scope.type);

To use loadsh you need to use cdn for lodash

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>

https://lodash.com/docs/4.17.5#uniq

edited Mar 13 '18 at 03:27

answered Mar 13 '18 at 03:18

Sangram Badi

4,054
9
45
78

score 0 · Answer 4 · answered Mar 13 '18 at 03:19

Try this loop :

$scope.type= ["Bar", "Pie", "Line", "Line", "Line", "Line", "Line", "Line", "map", "Line", "Bar", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie"];

var output = [];


angular.forEach($scope.type, function(type, index) {

          // if it's not already part of our keys array
          if(output.indexOf(type) === -1) {
              // push this item to our final output array
              output.push(item);
          }
      });

Naga Sai A · Answer 5 · 2018-03-13T04:33:55.213

To achieve expected result first sort and then filter with ng-if

      <ul>
  <li ng-repeat="x in sortedType = (type | orderBy) track by $index" ng-if="sortedType[$index -1] != x">
        {{ x }}
      </li>
    </ul>

code sample - https://codepen.io/nagasai/pen/bvVMvV

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.type= ["Bar", "Pie", "Line", "Line", "Line", "Line", "Line", "Line", "map", "Line", "Bar", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie", "Pie"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">
  
  <ul>
 <li ng-repeat="x in sortedType = (type | orderBy) track by $index" ng-if="sortedType[$index -1] != x">
    {{ x }}
  </li>
</ul>

</div>
</body>

Remove duplicate from ng-repeat

5 Answers5

Linked