过滤器在角

分组和嵌套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

回答

相关问题