如何使用 forEach 从 ng-repeat 中删除 json 对象

Question

目前我正在尝试使用 angularJS 中的 forEach 方法映射 2 个对象并将它们显示在手风琴中。我正确地获得了所有结果...但是我不确定如何隐藏或拼接验证之外的对象。

所以在我的小提琴示例中...我不想显示验证之外的项目（例如第四、第五、第六、第七个标题和值）

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 个问题外，一切正常。

我的手风琴标题正在重复 包含已验证数组的数组中的其他字段仍在显示

JSFiddle

Answer 1

您不必拼接数组对象，创建一个临时数组并将所需的对象存储到其中。

使用 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;

工作小提琴：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;

工作小提琴：https://jsfiddle.net/w1rnzs99/