角度

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

カテゴリ "Basketball"がドロップダウンメニューに2回表示されます。どのように私はそれをユニークか独特にすることができますか？

ありがとうございます！

Answer 1

重複を除外するためにAngularJS機能は必要ありません。 filterを使用して関数を自分で作成することもできますし、lodashなどのライブラリの不安定な解を使用することもできます。

ロダッシュでは、uniqByを使用できます。あなたのケースでは、_.uniqBy($scope.selects, 'subcategory')は、サブカテゴリの複製がない配列を返します。次に、この結果の配列をテンプレートにバインドします。