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

您可以按如下方式对数组类型进行“选择”，并使用ng-repeat指令中特定选项的索引从choices数组中删除选项。

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>

Answer 2

试试这个

{{1}}

Answer 3

您可以使用以下代码段删除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函数，而您也可以直接使用{{1}的执行范围内的可用变量在下面的代码段中，函数只传递removeChoice和parentId作为参数，您可以将choiceId替换为控制器items上的对象。如果您希望隔离代码可以将$scope对象作为参数传递给items函数，因为它不依赖于直接在方法体中使用的外部组件，我建议将关注点分开。

removeChoice

嵌套数组中的Angularjs Splice

3 个答案: