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>

这是我的html文件的一部分。数据内容由JavaScript文件上传：

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',},];});

类别＆＃34;篮球＆＃34;在下拉菜单中显示两次。我怎样才能使它独特或独特？

提前致谢！

Answer 1

您不需要任何AngularJS功能来过滤掉重复项。您可以自己创建一个函数，可以使用filter，甚至可以使用库中的aavilabile解决方案，例如lodash。

使用lodash，您可以使用uniqBy。在您的情况下，_.uniqBy($scope.selects, 'subcategory')将返回没有子类别重复的数组。然后将生成的数组绑定到模板。

如何使用角度使滤镜元素独特

1 个答案: