過濾器在角

分組和嵌套NG-重複使用下拉我有以下幾點：過濾器在角

vm.years = [{ 
    year: number, 
    proevents: [{year: number, division: string, level: string, place: string, names: string}], 
    nonproevents: [{year: number, division: string, level: string, place: string, names: string}] 
}] 

vm.yearselect = ['1991','1992','1993'] // years till this year

顯示代碼，而無需過濾的偉大工程！我有一個今年的標題，事件按合併師和級別分組。

我希望能夠按照年份進行過濾，從最近的一年開始，使用填入vm.yearselect的下拉列表作爲默認值。

問題是，它目前只是過濾年份，但嵌套的ng-repeat s不顯示任何內容。我究竟做錯了什麼？

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-filter.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
     <div id="winners"> 
     <div class="nopadding"> 
      <div class="heading-title heading-line-double nopadding"> 
       <h2>Winners:</h2> 
       <div class="filters">Choose Year <select name="filter" id="filter" ng-model="filter" ng-options="year for year in vm.yearselect" ng-change="changeFilter()"></select><div> 
      </div> 
     </div> 
     <div class="row" ng-repeat="year in vm.years | filter: filter:year.year"> 
      <div class="col-md-2"> 
       <div class="heading-title heading-dotted"><h3>{{year.year}}:</h3></div> 

      </div> 
     </div> 
      </div> 
      <div class="col-md-10"> 
        <div class="col-md-6 col-sm-12 nopadding" ng-repeat="(key, value) in year.proevents | orderBy: 'division' | groupBy: '[division,level]'"> 
         <div class="panel panel-default"> 
          <!-- Default panel contents --> 
          <div class="panel-heading">{{key}} </div> 

          <!-- Table --> 
          <table class="table"> 
          <tr ng-repeat="winner in value"> 
           <td>{{winner.place}}</td> 
           <td>{{winner.names}}</td> 
          </tr> 
          </table> 
         </div> 
        </div> 

        <div class="col-md-6 col-sm-12 nopadding" ng-repeat="(key, value) in year.nonproevents | orderBy: [division,level] | groupBy: '[division,level]'"> 
         <div class="panel panel-default"> 
          <!-- Default panel contents --> 
          <div class="panel-heading">{{key}}</div> 

          <!-- Table --> 
          <table class="table"> 
          <tr ng-repeat="winner in value"> 
           <td>{{winner.place}}</td> 
           <td>{{winner.names}}</td> 
          </tr> 
          </table> 
         </div> 
        </div> 
      </div> 
     </div> 
    </div> 
    </body> 

</html>

的Javascript：

/* global angular */ angular.module('rumbleApp') 
    .controller('HistoryController', HistoryController); 

function HistoryController($route, $routeParams, historyDataFactory, $filter, $parse, $anchorScroll, $location, $sanitize) { 
    var vm = this; 
    vm.title = 'Pottstown Rumble History'; 
    vm.isSubmitted = false; 
    vm.year = new Date().getFullYear(); 
    vm.yearselect = ['1991','1992']; 
    vm.scrollTo = function(id) { 
     $location.hash(id); 
     $anchorScroll(); 
    }; 

    vm.years = [{ 
      year: 1991, 
      nonproevents: [{ 
      division: 'Mens', 
      level: 'A', 
      place: '1st', 
      names: 'John Doe, Rob Doe' 
      }, 
      { 
      division: 'Mens', 
      level: 'A', 
      place: '2nd', 
      names: 'John Smith, Rob Smith' 
      },{ 
      division: 'Womens', 
      level: 'B', 
      place: '1st', 
      names: 'Jane Doe, Roberta Doe' 
      }, 
      { 
      division: 'Womens', 
      level: 'B', 
      place: '2nd', 
      names: 'Joanna Smith, Roberta Smith' 
      }], 
      proevents: [{ 
      division: 'Mens', 
      level: 'Pro', 
      place: '1st', 
      names: 'John Pro, Rob Pro' 
      }, 
      { 
      division: 'Mens', 
      level: 'Pro', 
      place: '2nd', 
      names: 'John Almost, Rob Notquite' 
      },{ 
      division: 'Womens', 
      level: 'Pro', 
      place: '1st', 
      names: 'Mary Amazing, Freida Fantastic' 
      }, 
      { 
      division: 'Womens', 
      level: 'Pro', 
      place: '2nd', 
      names: 'Doris Disappointed, Samantha Sad' 
      }] 
     }, 
     { 
      year: 1992, 
      nonproevents: [{ 
      division: 'Mens', 
      level: 'A', 
      place: '1st', 
      names: 'John Doe, Rob Doe' 
      }, 
      { 
      division: 'Mens', 
      level: 'A', 
      place: '2nd', 
      names: 'John Smith, Rob Smith' 
      },{ 
      division: 'Womens', 
      level: 'B', 
      place: '1st', 
      names: 'Jane Doe, Roberta Doe' 
      }, 
      { 
      division: 'Womens', 
      level: 'B', 
      place: '2nd', 
      names: 'Joanna Smith, Roberta Smith' 
      }], 
      proevents: [{ 
      division: 'Mens', 
      level: 'Pro', 
      place: '1st', 
      names: 'John Pro, Rob Pro' 
      }, 
      { 
      division: 'Mens', 
      level: 'Pro', 
      place: '2nd', 
      names: 'John Almost, Rob Notquite' 
      },{ 
      division: 'Womens', 
      level: 'Pro', 
      place: '1st', 
      names: 'Mary Amazing, Freida Fantastic' 
      }, 
      { 
      division: 'Womens', 
      level: 'Pro', 
      place: '2nd', 
      names: 'Doris Disappointed, Samantha Sad' 
      }] 
     }]; 

    vm.resetFilter = function() { 
     // set filter object back to blank 
     vm.filter = {}; 
    }; 
}

Sample code in plunkr

來源

2017-04-08 user3561890

你plunker有幾個問題。

兩個ng-repeat本來應該是裏面的ng-repeat="year in vm.years"在外面和它下面。我將它們移回。

你有這個第三級ng-repeat，但value是一個對象。

<table class="table"> 
    <tr ng-repeat="winner in value"> 
     <td>{{winner.place}}</td> 
     <td>{{winner.names}}</td> 
    </tr> 
</table>

因此改變了對，

<table class="table"> 
     <tr> 
      <td>{{value.place}}</td> 
      <td>{{value.names}}</td> 
     </tr> 
    </table>

這裏的working plunker其中具有years作品過濾器等做了嵌套ng-repeat

來源

2017-04-08 06:44:33 tanmay

那請問過濾器，但不與分組工作。我如何使它與嵌套的ng-repeat中的分組一起工作。 – user3561890

我想我需要重新組織我的數據，所以它的組織如下： – user3561890

AH！我想到了！我必須使用貓鼬聚合來重新組合數據，所以在ng重複中不需要分組！有用！謝謝！ – user3561890

回答

相關問題