Question

我目前正在为一个有效的“交易建设者”网站构建一个小部件。在构建器小部件中将添加一个＆＃34;添加新项目＆＃34;按钮，它会将新的device项添加到<li>列表。

 <ul class="deal-builder-devices entity">
     <li ng-repeat="device in devices">
         <div class="db-handset-image">
             <span class="phone-silhouette" ng-hide="hideSilhouette"></span>
                 <img ng-repeat="image in modelImages" src="[[image]]" ng-hide="!hideSilhouette" />
             </span>
         </div>
         <div class="db-device">
             <ul class="opts">
                 <li>
                     <select ng-model="selectedManufacturer" ng-change="getManufacturerModels(selectedManufacturer)">
                         <option value="">Manufacturer</option>
                         <option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>
                     </select>
                  </li>
                  <li>
                      <select ng-disabled="!models > 0" ng-model="selectedModel" ng-change="loadModelImage(selectedModel)">
                          <option value="">Model</option>
                          <option ng-repeat="model in models" value="[[model.id]]">[[model.model]]</option>
                       </select>
                  </li>
             </ul>
         </div>
      </li>
  </ul>

  <div class="deal-builder-controls entity">
      <button class="db-add-handset" ng-click="addDevice()"><i class="fa fa-plus-circle"></i> Add another handset</button>
      <button class="db-find-deals">Find deals</button>
  </div>

我遇到的问题是它为select选项提供完全相同的模型，因此如果我在一个下拉列表中更改select选项，它也会更改所有新生成的下拉列表。我该如何解决这个问题？

这就是$scope.addDevice();目前的工作方式：

$scope.devices = [0];
$scope.devicesCounter = 0;

$scope.addDevice = function () {

    $scope.devicesCounter++;
    $scope.devices.push($scope.devicesCounter);

}

Answer 1

你在所有的Dropbox上都有相同的型号，这是正常的用于

ng-model="device.selectedModel"

然后它会将它设置为设备，它应该可以工作。

Answer 2

最好是在$scope.devices内推送图像，制造商和模型。

还可以使用angular.copy()复制对象而不是传递引用。这样你就可以单独修改每个对象。

我改变的另一件事是track by $index之后的ng-repeat。这是必要的，因为我们将相同的对象推送到ng-repeat内不允许的数组中。如果要避免track by。

，可以使用某些通用键将设备数组更改为对象

最后，将ng-model设为device.childProperty。现在，您可以在devices数组中获得所需的所有数据。

以下是示例plunk

Angular＆＃34; new row＆＃34;功能

2 个答案: