Угловая функциональность «новая строка»

Question

В настоящее время я создаю виджет для сайта, который фактически является «конструктором сделок». В видже разработчика будет кнопка «добавить новый элемент», которая добавит новый элемент 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> 

Вопрос, который я имею, что это дает Выбор параметров точно такую ​​же модель, поэтому, если я изменю выбора опции в одном выпадающем списке, это изменит все вновь созданные выпадающие тоже. Как это исправить?

Это как $scope.addDevice(); в настоящее время работает:

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

$scope.addDevice = function() { 

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

} 

Answer 1

у вас есть та же модель на всех Dropboxes, так что это нормально использование в

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