Question

我有以下内容：

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没有显示任何内容。我做错了什么？

<!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

Answer 1

你的傻瓜有几个问题。

应该在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

使用角度下拉过滤分组和嵌套的ng-repeats

1 个答案: