<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body >
<div ng-app="app" ng-controller="myController">
<h5>Removing duplicates using unique filter</h5>
<select ng-options="fruit.name for fruit in fruits | unique: 'name'"
ng-model = "fruit">
</select>
</div>
</body>
</html>
// Code goes here
var app = angular.module('app',[])
.controller('myController', function myController( $scope ){
$scope.fruits = [{"id":"1","name" : "Apple"},
{"id":"2","name" : "Banana"},
{"id":"3","name" : "Orange"},
{"id":"4","name" : "Apple"},
{"id":"5","name" : "Orange"},
{"id":"6","name" : "Mango"}]
})
//filter to remove duplicates and show unique values
app.filter('unique', function () {
return function (items, filterOn) {
if (filterOn === false) {
return items;
}
if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
var hashCheck = {}, newItems = [];
var extractValueToCompare = function (item) {
if (angular.isObject(item) && angular.isString(filterOn)) {
return item[filterOn];
} else {
return item;
}
};
angular.forEach(items, function (item) {
var valueToCheck, isDuplicate = false;
for (var i = 0; i < newItems.length; i++) {
if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
isDuplicate = true;
break;
}
}
if (!isDuplicate) {
newItems.push(item);
}
});
items = newItems;
}
return items;
};
});
/* Styles go here */