Question

JSON

{
  "id": "1",
  "name": "T-Shirt",
  "status": "1",
  "product_attributes": [{
    "id": 1,
    "label": "Size",
    "choices": [{
      "text": "Size 30",
      "value": "Size 30",
      "isSelected": false,
      "price": "$100.00"
    }, {
      "text": "Size 32",
      "value": "Size 32",
      "isSelected": true,
      "price": "$100.00"
    }, {
      "text": "Size 34",
      "value": "Size 34",
      "isSelected": false,
      "price": "$100.00"
    }, {
      "text": "Size 36",
      "value": "Size 36",
      "isSelected": false,
      "price": "$100.00"
    }]
  }, {
    "id": 2,
    "label": "Color",
    "choices": [{
      "text": "Denim",
      "value": "Denim",
      "isSelected": true,
      "price": "$0.00"
    }, {
      "text": "Black",
      "value": "Black",
      "isSelected": false,
      "price": "$5.00"
    }, {
      "text": "Brown",
      "value": "Brown",
      "isSelected": false,
      "price": "$2.00"
    }],
  }]
}

HTML

<div ng-repeat="attributes in product.product_attributes">
    <h3>{{attributes.name}}</h3>
    <div class="choice">
        <h2>Choices</h2>
        <div ng-repeat="choices in attributes.choices">
            <div class="form-group">
                <input type="text" ng-model="choices.value" class="form-control"> 
                <a href="" ng-click="addField()">Add</a>
                <a href="" ng-click="removeField($index)">Remove</a>
            </div>
        </div>
    </div>
</div>

JS

$scope.attributes = {choices: [{label:'1'}]};

$scope.getProductAndAttributes = function() {
        $http({
            method: 'POST',
            url: 'products/get_product_details.json',
            dataType: "json",
            data: {'id': $stateParams.product_id},
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).success(function(data) {
            $scope.product_name = data.name;
            $scope.product_attributes = data.product_attributes;
        });
    };

$scope.addField = function() {
     var newItemNo = $scope.attributes.choices.length + 1; alert(newItemNo);
        $scope.attributes.choices.push({'label': 'choice' + newItemNo});
};
$scope.removeField = function(i) {
   $scope.attributes.choices.splice(i, 1);
};
if ($stateParams.product_id) {
    $scope.getProductAndAttributes();
}

上面我发布了自定义代码。但我的Add和Remove并没有奏效。请检查我从数据库中获取的JSON这些数据。

请帮帮我。

Answer 1

1）您在JSON内部出现语法错误，....."isSelected":false,"price":"$2.00"}],附近删除了逗号。

2）以dinamically方式编辑产品对象，将其传递给函数，而不是使用$scope，同样用于删除

3）你不需要手动更新数组长度，它由push函数完成。

＆＃13;

var app = angular.module("app", [])
  .controller("ctrl", function($scope) {
    $scope.product = JSON.parse('{"id":"1","name":"T-Shirt","status":"1","product_attributes":[{"id":1,"label":"Size","choices":[{"text":"Size 30","value":"Size 30","isSelected":false,"price":"$100.00"},{"text":"Size 32","value":"Size 32","isSelected":true,"price":"$100.00"},{"text":"Size 34","value":"Size 34","isSelected":false,"price":"$100.00"},{"text":"Size 36","value":"Size 36","isSelected":false,"price":"$100.00"}]},{"id":2,"label":"Color","choices":[{"text":"Denim","value":"Denim","isSelected":true,"price":"$0.00"},{"text":"Black","value":"Black","isSelected":false,"price":"$5.00"},{"text":"Brown","value":"Brown","isSelected":false,"price":"$2.00"}]}]}');

    $scope.addField = function(i, attributes) {
      attributes.choices.splice(i+1, 0, {
        'label': 'choice' + attributes.choices.length+1
      });
    };
    $scope.removeField = function(i, attributes) {
      attributes.choices.splice(i, 1);
    };
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="ctrl" ng-app="app">
  <div ng-repeat="attributes in product.product_attributes">
    <h3>{{attributes.name}}</h3>
    <div class="choice">
      <h2>Choices</h2>
      <div ng-repeat="choices in attributes.choices">
        <div class="form-group">
          <input type="text" ng-model="choices.value" class="form-control">
          <a href="" ng-click="addField($index, attributes)">Add</a>
          <a href="" ng-click="removeField($index, attributes)">Remove</a>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

这是一个有效的plunk。

这里有太多的更改来概述它们，但总结一下，你需要确定要通过某个键值而不是$ index来添加或删除的数组元素，如下所示：

$scope.removeField = function(attributeId, choiceValue) {
    var attributes = $scope.product.product_attributes;
    for (var i = 0; i < attributes.length; i++) {
      if (attributes[i].id === attributeId) {
        var attribute = attributes[i];
        var choices = attribute.choices;
        for (var j = 0; j < choices.length; j++) {
          if (choices[j].value === choiceValue) {
            choices.splice(j, 1);
            return;
          }
        }
      }
    }
  };

AngularJS动态添加和删除div不起作用

2 个答案: