Angularjs 拼接嵌套数组

Question

你好，有人可以帮忙从嵌套的 json 数组中删除元素吗？

JSON

[{
    "id": 1,
    "name": "Furniture & Fixture",
    "choice": {
        "0": {
            "req_goods": "table",
            "qty": "10"
        },
        "1": {
            "req_goods": "chair",
            "qty": "5"
        }
    }
}, {
    "id": 2,
    "name": "Miscellaneous Property",
    "choice": {
        "0": {
            "req_goods": "Office Rent",
            "qty": "1"
        }
    }
}]

这里如何删除 id 1 的选项 1。

HTML

<div ng-repeat="cb in capital_budgets">
    <div ng-repeat="choice in choices[$index]">
        <input ng-model="cb.choice[$index].req_goods">
        <input ng-model="cb.choice[$index].qty">
        <button ng-hide="$first" ng-click="removeChoice($parent.$index,$index)">-</button>
    </div>
    <button ng-click="addNewChoice($index)">+</button>
</div>

JS

$scope.capital_budgets = [{"id":1,"name":"Furniture & Fixture"},
                          {"id":2,"name":"Miscellaneous Property"}];
    $scope.choices = [{}];
    $scope.choices[0] = [{}];
    $scope.choices[1] = [{}];
    $scope.choices[2] = [{}];
    $scope.choices[3] = [{}];
    $scope.choices[4] = [{}];

    $scope.addNewChoice = function(id) {
        $scope.choices[id].push({});
    };

    $scope.removeChoice = function(parent_id, id) {
        $scope.choices[parent_id].splice(id, 1);
    };

上面的 removeChoice() 删除了最后一个元素，但我想删除用户选择删除的元素。请帮助我从 2 天开始尝试。

Answer 1

试试这个

 $scope.removeChoice = function(parent_id,id) {       

    var TempArr=[];
    var parentLength=$scope.choices[parent_id].length;
    for(i=0;i<parentLength;i++ ){
        if(parentLength[i]!==id){
            TempArr.push(parentLength[i]);
        }
        if(i==parentLength-1){
             $scope.choices[parent_id]=[];
            $scope.choices[parent_id]=TempArr;
        }
    }
 };

Answer 2

您可以使用以下代码片段删除 ID 1 的选项“1”。

var json = [
{
    "id": 1,
    "name": "Furniture & Fixture",
    "choice": {
        "0": {
            "req_goods": "table",
            "qty": "10"
        },
        "1": {
            "req_goods": "chair",
            "qty": "5"
        }
    }
}, {
    "id": 2,
    "name": "Miscellaneous Property",
    "choice": {
        "0": {
            "req_goods": "Office Rent",
            "qty": "1"
        }
    }
}];

function removeChoice(json, parentId, choice) {
  for (var i = 0; i < json.length; i++) {
    if (json[i].id === parentId) {
      delete json[i].choice[choice];
      break;
    }
  }
}

removeChoice(json, 1, "1");
console.log(json);

如果您希望选项也与其父元素属于同一类型，即数组，您可以按如下方式更改 JSON 并按照下面的代码片段所示操作以从中删除选项JSON

var json = [
{
    "id": 1,
    "name": "Furniture & Fixture",
    "choices": [
    {
      "id": 1,
      "req_goods": "table",
      "qty": "10"
    },
    {
      "id": 2,
      "req_goods": "chair",
      "qty": "5"
    }]
}, {
    "id": 2,
    "name": "Miscellaneous Property",
    "choices": [
    {
      "id": 1,
      "req_goods": "Office Rent",
      "qty": "1"
    }]
}];

function removeChoice(json, parentId, choiceId) {
  for (var i = 0; i < json.length; i++) {
    if (json[i].id === parentId) {
      for (var j = 0; j < json[i].choices.length; j++) {
       if (json[i].choices[j].id === choiceId) {
          json[i].choices.splice(j, 1);
          break;
        }
      }
      
      break;
    }
  }
}

removeChoice(json, 1, 1);
console.log(json);

在上述两种方法中，我都将要修改的源作为参数传递给 removeChoice 函数，而您也可以直接使用 [= 执行范围内可用的变量13=] 函数并仅传递 parentId 和 choiceId 作为以下代码片段中的参数，您可以将 items 替换为控制器 $scope 上的对象。如果您更喜欢隔离您可以将 items 对象作为参数传递给 removeChoice 函数的代码，因为它不依赖于直接在方法主体中使用的外部组件，我建议分离担忧。

var items = [
{
    "id": 1,
    "name": "Furniture & Fixture",
    "choices": [
    {
      "id": 1,
      "req_goods": "table",
      "qty": "10"
    },
    {
      "id": 2,
      "req_goods": "chair",
      "qty": "5"
    }]
}, {
    "id": 2,
    "name": "Miscellaneous Property",
    "choices": [
    {
      "id": 1,
      "req_goods": "Office Rent",
      "qty": "1"
    }]
}];

function removeChoice(parentId, choiceId) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].id === parentId) {
      for (var j = 0; j < items[i].choices.length; j++) {
       if (items[i].choices[j].id === choiceId) {
          items[i].choices.splice(j, 1);
          break;
        }
      }
      
      break;
    }
  }
}

removeChoice(1, 1);
console.log(items);

Answer 3

您可以按如下方式创建数组类型的 'choice'，并使用 ng-repeat 指令中特定选项的索引从选项数组中删除该选项。

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var vm = this;
    vm.items = [
    {
        "id": 1,
        "name": "Furniture & Fixture",
        "choices": [
        {
          "id": 1,
          "req_goods": "table",
          "qty": "10"
        },
        {
          "id": 2,
          "req_goods": "chair",
          "qty": "5"
        }]
    }, {
        "id": 2,
        "name": "Miscellaneous Property",
        "choices": [
        {
          "id": 1,
          "req_goods": "Office Rent",
          "qty": "1"
        }]
    }];
    
    vm.removeChoice = removeChoice;
    vm.addChoice = addChoice;
    
    function removeChoice(itemId, index) {
      for (var i = 0; i < vm.items.length; i++) {
        if (vm.items[i].id === itemId) {
          vm.items[i].choices.splice(index, 1);
          break;
        }
      }
    }
    
    function addChoice(index) {
      var id = vm.items[index].choices.length + 1;
      vm.items[index].choices.push({
        id: id,
        req_goods: "",
        qty: 0
      });
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <div ng-repeat="item in ctrl.items">
      <h3>{{item.name}}</h3>
      <div ng-repeat="choice in item.choices">
        <input type="text" ng-model="choice.req_goods" />
        <input type="text" ng-model="choice.qty" />
        <button type="button" ng-click="ctrl.removeChoice(item.id, $index)">Remove</button>
      </div>
      <button type="button" ng-click="ctrl.addChoice($index)">Add</button>
    </div>
  </div>
</div>

Angularjs 拼接嵌套数组

Angularjs Splice in Nested Array

nested

angularjs

dynamicform