AngularJS динамическое добавление и удаление DIV не работает

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), чтобы динамически изменять объект продукта передать его в функцию вместо того, чтобы использовать $scope, то же самое для удаления

3) Вам не нужно обновить длину массива вручную, его самой функции нажимной.

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); 
 
    }; 
 
    });

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

Answer 2

Вот рабочий plunk.

Есть слишком много изменений, чтобы изложить их здесь, но резюмировать вам нужно определить элемент массива, который вы хотите добавить или удалить какой-то ключевое значение, а не $ индекса, например:

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