ng-repeat unique values only (combine duplicates) - angularjs

Question

I have an ng-repeat like this:
<option ng-repeat="item in items | orderBy:'priority'"
value="{{item.SAC}}.{{item.difficulty}}">
{{item.SAC}}.{{item.difficulty}} - {{SACItem(item.SAC).description}}
</option>
I want it to combine any duplicates based on both item.SAC and item.difficulty if both of those are a duplicate of the repeat they should be combined, otherwise they can be seperate.
I tried the unique filter but I couldn't get it to work with 2 variables.

Answer 1

You can create a filter:
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.items = [
{ name: 'john', age:45 },
{ name: 'tim', age: 36 },
{ name: 'bob', age: 44 },
{ name: 'john', age: 45 }
];
});
app.filter('unique', function() {
var uniqueItems = [];
function exists(item, parms) {
return uniqueItems.some((i) => parms.every((p) => i[p] == item[p]));
}
return function(arr, name, age) {
if (arr) {
uniqueItems.length = 0;
angular.forEach(arr, function(item) {
if (!exists(item, [name,age])) {
uniqueItems.push(item);
}
});
return uniqueItems;
}
return arr;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-shim.js"></script>
<div ng-app ="app" ng-controller="ctrl">
<h1>Original Array</h1>
<ul>
<li ng-repeat="item in items">
{{item.name }} - {{ item.age }}
</li>
</ul>
<h1>Unique Array</h1>
<ul>
<li ng-repeat="item in items | unique:'name':'age'">
{{item.name }} - {{ item.age }}
</li>
</ul>
</div>
You can also use this filter in the controller instead of the view:
app.controller('ctrl', function($scope, $filter) {
var items = [...];
$scope.items = $filter('unique')(items, 'name', 'age');
});