【问题标题】:AngularJS nested ng-repeat filter multiple parametersAngularJS 嵌套 ng-repeat 过滤多个参数
【发布时间】:2016-02-11 10:01:05
【问题描述】:

长期潜伏者,第一次海报。真的很喜欢这里的社区:)

好的,解决问题。目标是通过向过滤器传递 2 个参数来过滤 ng-repeat。

我有一个嵌套的 ng-repeat,在第二次重复时,我需要根据条目的寿命是否在当月过滤条目。

我以前用 ng-if 做过这个,但是因为我对奇数行和偶数行使用不同的 CSS,所以产生了不需要的结果。

相关的 HTML 部分:

<div class="col-md-12" ng-repeat="month in monthTable">
 <div class="col-md-12">
  <h2>
   <span>{{ month.start | amDateFormat:"MMMM" | uppercase}}</span>
  </h2>
 </div>
 <div class="col-md-12">
  <div ng-class-even="'calendar_row_even'" ng-class-odd="'calendar_row_odd'"
ng-repeat="bed in syncData.beds | filter: filterListItems(month, bed) |
orderBy:'timeFrom'">
   // --> displays the unfiltered results for each month at the moment...
  </div>
 </div>
</div>

monthTable 用于确定一个月的开始和结束时间 + 生成名称是合适的语言环境,它是这样填充的:

for ( var i = 0; i < 12; i++) {
  $scope.monthTable.push({
    start: new Date(Date.UTC($scope.currentYear, i, 1)).getTime(),
    end: new Date(Date.UTC($scope.currentYear, i+1, 1)).getTime()
  })
};

到目前为止非常不言自明。

现在这里是“应该做”过滤的函数:

$scope.filterListItems = function (month, bed) {
  console.log(month);
  console.log(bed);
  return true;
  /*return (bed.timeFrom < month.end && bed.timeUntil >= month.start);
--> this should be the code.*/
};

问题是我无法让过滤器接收 2 个参数。 如果我是这样写的:

"filter: filterListItems(month, bed)"

一个月过去了,但床是不确定的

如果我这样写:

"filter: filterListItems:month:bed"

只有床被传递,但月份未定义

我不知道我做错了什么,如果有任何人能指出我正确的方向,我将不胜感激。

【问题讨论】:

    标签: javascript angularjs angularjs-ng-repeat ng-repeat angularjs-filter


    【解决方案1】:

    您应该将您的方法声明为过滤器:

    angular.module('yourApp')
        .filter('filterListItems', filterListItems);
    

    并调整您的方法,如下所示:

    function filterListItems() {
        return function(items, month) {
            // 'items' represent the objects listed by your ng-repeat
            // Now, filter the items to return only items that respect your condition.
            return items.filter(function(item) {
                return (item.timeFrom < month.end && item.timeUntil >= month.start);
            });
        }
    }
    

    并像这样使用它:

    ng-repeat="bed in syncData.beds | filterListItems:month
    

    【讨论】:

      猜你喜欢
      • 2020-05-28
      • 1970-01-01
      • 2014-06-21
      • 2016-09-13
      • 1970-01-01
      • 1970-01-01
      • 2015-09-15
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多