ng-model 显示重复值答案

【问题标题】：ng-model display duplicate valueng-model 显示重复值
【发布时间】：2014-10-15 11:16:38
【问题描述】：

以下是我的代码，请看一下

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>

在此代码中，基于所选选项，我在相关结果中显示相关结果，用户可以填写产品价格和数量，在 ng-model 使用的 formData 中，我可以将所有填充值绑定到一个数组中，但 ng-model 值显示所有重复值

【问题讨论】：

标签： javascript angularjs ng-repeat

【解决方案1】：

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>

您在重复时替换了 formData.customsize 值。所以你必须分配不同的模型

【讨论】：

很高兴为您提供帮助。 :)。很高兴您可以投票并标记为正确答案。 :)