javascript - 使用 forEach 从 ng-repeat 中删除 json 对象和 Accordion header

标签 javascript angularjs foreach accordion

目前我正在使用 forEach 循环一些数据并将它们吐出在 Accordion 中。我比较 2 组 json 数据并应用验证来设置 Accordion 。为了过滤掉不需要的数据...我使用临时变量来存储值并重复它们。除了 2 个问题外,一切正常。

  1. 我的 Accordion 标题正在重复
  2. 包含已验证数组的数组中的其他字段仍然是 正在显示

JSFIDDLE LINK**

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 :

 $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;

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},
        {'name': 6},
        {'name': 9}
      ]
    }, 
    {
      'headingName': 'firstHeader',    
      'feeBag': [
        {'name': 2},
        {'name': 5}
      ]
    },
    {
      'headingName': 'thirdHeader',    
      'feeBag': [
        {'name': 3}
      ]
    },
    { 
      'headingName': 'thirdHeader',
      'feeBag': [
        {'name': 2},
        {'name': 6}
      ]
    }, 
    { 
      'headingName': 'forthHeader',
      'feeBag': [
        {'name': 5},
        {'name': 8}
      ]
    }

  ];

最佳答案

为您的 Controller 尝试类似的操作

$scope.temp=[];
  angular.forEach($scope.fees, function(value, key) {
    // first take care of the duplicated headers
    var foundFee = false
    for(var i=0; i < $scope.temp.length && !foundFee; i++)
    {
      if(value.headingName === $scope.temp[i].headingName)
      {
        $scope.temp[i].feeBag.push.apply($scope.temp[i].feeBag, value.feeBag);
        foundFee = true;
      }
    }
    if(!foundFee)
    {
      $scope.temp.push(value);
    }
  });

  // Then go through your temp array and get rid of the bad values
  angular.forEach($scope.temp, function(value, key) {
    for(var j=0 ; j<value.feeBag.length ; j++)
    {
      var value2 = value.feeBag[j];
      var feebagFound = false;
        for(var k=0 ; k < $scope.otherFees.length ; k++)
      {
        var value3 = $scope.otherFees[k];
        if (value2.name === value3.name) {
          value2.text =  value3.text;
          value2.amount = value3.amount;
          feebagFound = true;   
        }
      }
      if(!feebagFound)
      {
        value.feeBag.splice(j, 1);
        j--;
      }
    }
  });
  $scope.fees=$scope.temp;

关于javascript - 使用 forEach 从 ng-repeat 中删除 json 对象和 Accordion header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44850228/

相关文章:

javascript - 可调整大小的母版页和内容占位符

javascript - 如何隐藏#id对象

Javascript 递归函数迭代 JSON 的中断条件

java - 有没有办法为 Guava 表使用 for-each 结构?

javascript - 设置一天的 CSS 设计?

javascript - 使用 AngularJS 中的表单对 ControllerAs 进行单元测试

javascript - 当 Controller 在单独的文件中时应用程序不加载

javascript - 如何在 Angular/Javascript 中对街道地址进行排序

javascript - 在 JavaScript 中填充 2 个选择元素会清除第一个元素

php - 在PHP中,如何在foreach循环中播放数据库中的音频?