Question

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

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值显示所有重复值

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

ng-model显示重复值

1 个答案: