作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
目前我正在尝试使用 angularJS 中的 forEach 方法映射 2 个对象并将它们显示在 Accordion 中。我并没有真正得到我想要的结果...它并没有真正过滤或吐出我想要的 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>
Controller :
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
最佳答案
在内部添加另一个循环来检查 $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 。我已经更新了。我希望这就是您所寻找的。
关于javascript - 如何将 forEach 映射到 angularJS 中的 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44836598/
我是一名优秀的程序员,十分优秀!