CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
ranjit
ranjit

Reputation: 21

ng-model display duplicate value

Following are my code please take a look

var app = angular.module('myApp', []);

app.controller('displayData', function($scope){
     $scope.selected = {};

     $scope.formData = {};
        $scope.customproductoption = [
            {
                "id" : "1",
                "producttype" : "Shoe",
                "sizetype" : [
                    { "size" : "15" },
                    { "size" : "16" },
                    { "size" : "17" }
    			]
            },{
                "id" : "2",
                "producttype" : "Dress",
                "sizetype" : [
                	{ "size" : "XS" },
                    { "size" : "S" },
                    { "size" : "L" }
                ]
            }
        ];
});
<html ng-app="myApp">
  
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<title></title>

</head>
<body ng-controller="displayData">
<select ng-model="selected.producttype" ng-options="s.producttype for s in customproductoption">
       <option value="">-- Custom Product Option --</option>
    </select>
    
    <table class="table">
      <thead>
        <tr>
          <th>Index</th>
          <th>Size</th>
          <th>Price</th>
          <th>Qty</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="s in selected.producttype.sizetype">
        	<td>{{$index+1}}</td>
         	<td><input type="text" ng-model="formData.customsize" ng-init="formData.customsize=s.size" id="productsize" disabled></td>
          	<td><input type="text" ng-model="formData.customproductprice" id="customprice" name="productprice"></td>
         	<td><input type="text" ng-model="formData.customproductqty" id="customqty" name="productqty"></td>
        </tr>
      </tbody>
    </table>
</body>
</html>

In this code based on selected option, i show related result in related result users can fill product price and quantity, in ng-model used formData i can bind all filled value in one array but ng-model value display all duplicate value

Upvotes: 0

Views: 803

Answers (1)

Kalhan.Toress
Kalhan.Toress

Reputation: 21911

var app = angular.module('myApp', []);

app.controller('displayData', function($scope){
     $scope.selected = {};

     $scope.formData = {};
        $scope.customproductoption = [
            {
                "id" : "1",
                "producttype" : "Shoe",
                "sizetype" : [
                    { "size" : "15" },
                    { "size" : "16" },
                    { "size" : "17" }
    			]
            },{
                "id" : "2",
                "producttype" : "Dress",
                "sizetype" : [
                	{ "size" : "XS" },
                    { "size" : "S" },
                    { "size" : "L" }
                ]
            }
        ];
});
<html ng-app="myApp">
  
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
	<title></title>

</head>
<body ng-controller="displayData">
<select ng-model="selected.producttype" ng-options="s.producttype for s in customproductoption">
       <option value="">-- Custom Product Option --</option>
    </select>
    
    <table class="table">
      <thead>
        <tr>
          <th>Index</th>
          <th>Size</th>
          <th>Price</th>
          <th>Qty</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="s in selected.producttype.sizetype">
        	<td>{{$index+1}}</td>
         	<td><input type="text" ng-model="formData.customsize[$index]" ng-init="formData.customsize[$index]=s.size" id="productsize" disabled></td>
          	<td><input type="text" ng-model="formData.customproductprice" id="customprice" name="productprice"></td>
         	<td><input type="text" ng-model="formData.customproductqty" id="customqty" name="productqty"></td>
        </tr>
      </tbody>
    </table>
</body>
</html>

you'r replacing the formData.customsize value when repeating. so you have to assign different models

Upvotes: 1

Related Questions