AngularJS

Question

JSONを動作していない動的な追加やdiv要素を削除

{ 
    "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内で構文エラーが発生しました.のカンマを削除してください。 dinamically製品のオブジェクトの代わりに使用する機能に

3を除去するための同じ$scopeを渡し編集する

2））あなたはそのプッシュ機能によって行われ、手動で配列の長さを更新する必要がいけません。

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