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

Jeremy 发表于 Dev

杰里米

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

维兹

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。