个人中心
gpt4 book ai didi

javascript - 过滤器分组和嵌套 ng-repeats，带有 Angular 下拉菜单

转载 作者：行者123 更新时间：2023-12-03 04:36:12 27 4
gpt4 key购买 nike

我有以下内容:

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

最佳答案

你的骗子有几个问题。

  • 本应位于 ng-repeat="year in vm.years" 内部的两个 ng-repeat 位于其外部和下方。我把它们搬回来了。

  • 您拥有第三级 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

也可以工作

关于javascript - 过滤器分组和嵌套 ng-repeats，带有 Angular 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43290836/

27 4 0
文章推荐： javascript - react Redux : dispatch returning data to component
文章推荐： javascript - 重绘后 Cyclejs 输入未重置
文章推荐： javascript - 如何在 ASp.NET mvc 中使用 Jquery 将数组绑定(bind)到嵌套字段
文章推荐： javascript - 用折线连接多个标记
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com