如何将forEach映射到angularJS中的手风琴答案

【问题标题】：How to map a forEach into an accordion in angularJS如何将forEach映射到angularJS中的手风琴
【发布时间】：2017-06-29 23:41:39
【问题描述】：

目前我正在尝试使用 angularJS 中的 forEach 方法映射 2 个对象并将它们显示在手风琴中。我并没有真正得到我想要的结果......它并没有真正过滤或吐出我在 html 中想要的正确数据。

这是我目前所拥有的......

HTML：

<accordion ng-repeat="fee in fees">
  <accordion-group ng-if="fee.feeBag.length">
    <accordion-heading>
      {{fee.headingName}}
    </accordion-heading>
      <div class="feecode-height" ng-repeat="feeParameter in fee.feeBag">
        <div class="row">
          <div class="col-xs-1">{{feeParameter.name}}</div>
          <div class="col-xs-4">{{feeParameter.text}}</div>
          <div class="col-xs-2" >{{feeParameter.amount}}</div>
        </div>
      </div>
  </accordion-group>
</accordion>

控制器：

angular.forEach($scope.fees, function(value, key) {
  angular.forEach(value.feeBag, function(value2, key2) {
    if (value.feeBag[key2].name === $scope.otherFees.name) {
      value.feeBag[key2].text =  $scope.otherFees.text;
      value.feeBag[key2].amount = $scope.otherFees.amount;

      return value.feeBag[key2];            
    } else {
      // remove the ones that dont belong 
      // value.feeBag.splice(key, 1);
    }

  });
});

JSON 值：

$scope.otherFees = [{'name': 1, 'text': 'ok', 'amount': 2}, {'name': 2, 'text': 'hello', 'amount': 3}, {'name': 3, 'text': 'cool', 'amount': 3}]

$scope.fees = [
  { 
    'headingName': 'firstHeader',
    'feeBag': [
      {'name': 1}
    ]
  }, 
  {
    'headingName': 'secondHeader',    
    'feeBag': [
      {'name': 2}
    ]
  },
  {
    'headingName': 'thirdHeader',    
    'feeBag': [
      {'name': 3}
    ]
  }
]

我只是有点卡在下一步应该去哪里....似乎我将其设置为按标题名称对值进行分组并让各个集合显示在行中。

感谢所有帮助：D

【问题讨论】：

尝试将ng-if="fee.feeBag.length" 更改为ng-if="fee.feeBag.length > 0"
标头工作正常...其余部分不能正常工作
您是在尝试使用引导手风琴还是其他方式？使用带有面板类的 div 标签将引导程序转换为手风琴。
手风琴本身工作正常....我认为是 foreach 过滤不能正常工作
我没有过多地使用 Angular，并且在今天之前我从未使用过自定义 Accordion 标签。我只是想帮忙。我只是将您的代码放入 JSFiddle 中，让我们看看是否可以解决此问题。如果我犯了任何错误，请将其修改为您的代码：jsfiddle.net/luthrayatin/avuL06v3/1

标签： javascript angularjs foreach accordion

【解决方案1】：

在里面添加另一个循环来检查$scope.otherFees items 的每个值：

angular.forEach($scope.fees, function(value, key) {
    angular.forEach(value.feeBag, function(value2, key2) {
        angular.forEach($scope.otherFees, function(value3, key3){
        if (value.feeBag[key2].name === value3.name) {
          value.feeBag[key2].text =  value3.text;
          value.feeBag[key2].amount = value3.amount;

          return value.feeBag[key2];            
        } else {
          // remove the ones that dont belong 
          // value.feeBag.splice(key, 1);
        }
      })
    });
  });

看看jsFiddle。我已经更新了它。我希望这就是你想要的。

【讨论】：