How to make filter elements unique by using angular

Question

                <select ng-model="model" id="filter">
                    <option value="" id="dropdownDefault">Title</option>
                    <option ng-repeat="select in selects" value="{{select.title}}" id="dropdown">{{select.title}}</option>
                </select>

                <select ng-model="model" id="filter">
                    <option value="" id="dropdownDefault">Date</option>
                    <option ng-repeat="select in selects" value="{{select.schedule}}" id="dropdown">{{select.schedule}}</option>
                </select>

                <select ng-model="model" id="filter">;
                    <option value="" id="dropdownDefault">Category</option>
                    <option ng-repeat="select in selects" value="{{select.subcategory}}" id="dropdown">{{select.subcategory}}</option>
                </select>

                <select ng-model="model" id="filter">;
                    <option value="" id="dropdownDefault">Owner</option>
                    <option ng-repeat="select in selects" value="{{select.owner}}" id="dropdown">{{select.owner}}</option>
                </select>
                <input type="search" id="search" class="light-table-filter" data-table="table-striped" placeholder="Search..."> 
                <table class="table table-striped" style="text-align:left" id="contentTable">
                    <thead>
                        <tr id="titel">
                            <th style="display:none;">MainCategory</th>
                            <th>Category</th>
                            <th>Title</th>
                            <th>Date & Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="select in selects | filter:model">
                            <td style ="display:none;">{{select.maincategory}}</td>
                            <td>{{select.subcategory}}</td>
                            <td><a href= "{{select.link}}"> {{select.title}}</a> </td>
                            <td>{{select.schedule}}</td>
                        </tr>
                    </tbody>
                </table>

This is a part of my html file. The content of the data is uploaded by a JavaScript file:

var myApp = angular.module('myApp', ['infinite-scroll']);myApp.controller('controller', function($scope) {
$scope.selects = [ 
{ID: '0',maincategory: 'Entertainment',subcategory: 'Music',title: 'Zac Brown Band',link: 'xyz',schedule: 'Tuesday | 12:25AM ET',},
{ID: '1',maincategory: 'Sports',subcategory: 'Basketball',title: 'WNBA: Dallas @ Phoenix',link: 'xyz',schedule: 'Saturday | 12:25AM ET',},
{ID: '2',maincategory: 'Sports',subcategory: 'Basketball',title: 'WNBA: Phoenix @ San Antonio',link: 'xyz',schedule: 'Friday | 12:00AM ET',},];});

The category "Basketball" is displayed twice in the dropdown menu. How can I make it unique or distinct?

Thanks in advance!

Answer 1

You do not need any AngularJS functionality to filter out duplicates. You can create a function yourself, maybe using filter, or even use an aavilabile solution from library such as lodash.

With lodash, you can use uniqBy. In your case, _.uniqBy($scope.selects, 'subcategory') will return an array without the subcategory duplicate. Then just bind this resulting array to your template.