0

嗨有人可以像这样帮助从嵌套的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 天开始一​​直在尝试。

4

3 回答 3

1

您可以按如下方式对数组类型进行“选择”，并使用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>

于 2016-09-02T10:17:13.767 回答
0

尝试这个

 $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;
        }
    }
 };
于 2016-09-02T07:24:09.823 回答
0

您可以使用以下代码片段删除 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函数，而您也可以直接使用函数执行范围内可用的变量，并在下面的代码片段中removeChoice仅传递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);

于 2016-09-02T08:15:23.730 回答