代码之家 › 专栏 › 技术社区 › jeremy

如何在angularJS中将forEach映射为手风琴

accordion foreach angularjs javascript

jeremy · 技术社区 · 7 年前

目前,我正在尝试使用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

1 回复 | 直到 7 年前

Yatin 7 年前

在内部添加另一个循环以检查 $scope.otherFees

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前