AngularJS dynamic add and remove div not working

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

Above I have posted my customize code. But my Add and Remove not not working. Please check my JSON this data I am getting from my database.

Please help me.

"no working" is pretty general. We have no idea what you expect Add or Remove to do. I will say that you have both $scope.product_attributes and $scope.attributes, which is confusing, and you point to $scope.attributes.choices but choices is a property of a single attribute, not the array. You'd what $scope.attributes[0].choices or whatever. — Heretic Monkey
– Heretic Monkey, Commented Sep 13, 2016 at 15:07

Vanojx1 · Accepted Answer · 2016-09-13 15:14:39Z

1) you ve a syntax error inside the JSON, near ....."isSelected":false,"price":"$2.00"}], remove the comma.

2) to dinamically edit the product object pass it to the function instead of use the $scope, same for removing

3) you dont need to update the array length manually, its done by the push function.

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>

jbrown · Accepted Answer · 2016-09-13 15:45:43Z

0

Here's a working plunk.

There are too many changes to outline them here but to summarize you need to identify the array element that you want to add or remove by some key value rather than by $index, like this:

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

answered Sep 13, 2016 at 15:45

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS dynamic add and remove div not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related