如何使用 forEach 从 ng-repeat 中删除 json object
How to remove json object from ng-repeat using forEach
目前我正在尝试使用 angularJS 中的 forEach 方法映射 2 objects 并将它们显示在手风琴中。我正确地得到了所有结果...但是我不确定如何隐藏或拼接验证之外的 objects。
所以在我的 fiddle 示例中...我不想显示验证之外的项目(例如第四、第五、第六、第七 header 和值)
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) {
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);
}
})
});
});
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}
]
},
{
'headingName': 'forthHeader',
'feeBag': [
{'name': 4}
]
},
{
'headingName': 'fifthHeader',
'feeBag': [
{'name': 5}
]
},
{
'headingName': 'sixthHeader',
'feeBag': [
{'name': 6}
]
},
{
'headingName': 'seventhHeader',
'feeBag': [
{'name': 7}
]
}
];
编辑:
除 2 个问题外,一切正常。
我的手风琴 header 正在重复
数组中包含已验证数组的其他字段仍在显示
您不必拼接数组对象,创建一个临时数组并将需要的对象存储到其中。
使用 For 循环:
$scope.temp = [];
for (var i = 0; i < $scope.fees.length; i++) {
for (var j = 0; j < $scope.fees[i].feeBag.length; j++) {
for (var k = 0; k < $scope.otherFees.length; k++) {
if ($scope.fees[i].feeBag[j].name == $scope.otherFees[k].name) {
$scope.fees[i].feeBag[j].text = $scope.otherFees[k].text;
$scope.fees[i].feeBag[j].amount = $scope.otherFees[k].amount;
$scope.temp.push($scope.fees[i]);
}
}
}
}
$scope.fees = $scope.temp;
工作Fiddle:https://jsfiddle.net/q5s1pchd/2/
使用Angular ForEach
$scope.temp=[];
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;
$scope.temp.push(value);
}
})
});
});
$scope.fees=$scope.temp;
工作Fiddle:https://jsfiddle.net/w1rnzs99/
目前我正在尝试使用 angularJS 中的 forEach 方法映射 2 objects 并将它们显示在手风琴中。我正确地得到了所有结果...但是我不确定如何隐藏或拼接验证之外的 objects。
所以在我的 fiddle 示例中...我不想显示验证之外的项目(例如第四、第五、第六、第七 header 和值)
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) {
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);
}
})
});
});
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}
]
},
{
'headingName': 'forthHeader',
'feeBag': [
{'name': 4}
]
},
{
'headingName': 'fifthHeader',
'feeBag': [
{'name': 5}
]
},
{
'headingName': 'sixthHeader',
'feeBag': [
{'name': 6}
]
},
{
'headingName': 'seventhHeader',
'feeBag': [
{'name': 7}
]
}
];
编辑:
除 2 个问题外,一切正常。
我的手风琴 header 正在重复 数组中包含已验证数组的其他字段仍在显示
您不必拼接数组对象,创建一个临时数组并将需要的对象存储到其中。
使用 For 循环:
$scope.temp = [];
for (var i = 0; i < $scope.fees.length; i++) {
for (var j = 0; j < $scope.fees[i].feeBag.length; j++) {
for (var k = 0; k < $scope.otherFees.length; k++) {
if ($scope.fees[i].feeBag[j].name == $scope.otherFees[k].name) {
$scope.fees[i].feeBag[j].text = $scope.otherFees[k].text;
$scope.fees[i].feeBag[j].amount = $scope.otherFees[k].amount;
$scope.temp.push($scope.fees[i]);
}
}
}
}
$scope.fees = $scope.temp;
工作Fiddle:https://jsfiddle.net/q5s1pchd/2/
使用Angular ForEach
$scope.temp=[];
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;
$scope.temp.push(value);
}
})
});
});
$scope.fees=$scope.temp;
工作Fiddle:https://jsfiddle.net/w1rnzs99/