Ng-repeat и автоматический выбор с модальным окном в Angular

Я делаю приложение в Angular. Это таблица с одной строкой, которая содержит 2 столбца. Каждый столбец содержит один выбор. Они пусты. Когда пользователь нажимает кнопку, появляется модальное окно и отображается сетка со всеми элементами (из json) первого выбора. Когда пользователь щелкает одну строку и нажимает «Подтвердить», модальное окно закрывается, заполняя первый выбор. Тем временем второй выбор заполняет подмассив выбранного элемента.

В двух словах, есть 2 выбора: вы выбираете вариант в первом (в модальном окне), а затем вы выбираете элемент его подмассива во втором выборе.

Затем пользователь может добавлять новые строки, повторяя выборку.

Я пробовал два способа сделать это, и они наполовину работают. В ПЕРВОМ КОДЕ вы можете видеть, что после нажатия на модальное окно первый выбор заливки сам (даже если не первый, не знаю почему..). И это не очень хорошо повторяется, потому что когда вы выбираете элемент в новой строке, он изменяет все остальные варианты, и я хочу предотвратить это.

      <select ng-model="selectedProduct" ng-options="a as a.nome for a in items" ng-change="selectLot(select1)">
    <option value="">-- Select Product --</option>
  </select>

  <select ng-model="selectedLot" ng-options="a as a.value for a in selectedProduct.lots" ng-change="lotSelect(select2)">
    <option value="">-- Select Lot --</option>
  </select>

ВТОРОЙ КОД работает лучше. Это хорошо повторяется. Он автоматически меняет выбор второго элемента. Но когда я нажимаю на модальное окно, первый выбор не заполняется автоматически выбранным элементом.

Вы можете помочь мне? Не могу найти решение..... Большое спасибо за совет!


javascript angularjs modal-dialog angularjs-ng-repeat ngtable
person panagulis72    schedule 20.11.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Суть проблемы в том, что если вы хотите иметь форму, которая редактирует элементы в массиве, вам нужно иметь отдельные модели для каждой из строк в массиве. Вы можете сделать это, превратив "selectedProduct" и "selectedLot" в объекты, которые сопоставляют индекс массива с выбранным значением для этой строки.

Я сделал обновленный плункер с рабочим примером, но, не глядя на него, вот краткое изложение изменений, которые вы надо бы сделать. Вам нужно изменить свои модели, чтобы они ссылались на что-то, используя индекс массива строки, а также передавали этот индекс в функции, которые изменяют строку:

  <button class="btn btn-default" ng-click="open($index)">OPEN!!</button>

  <select ng-model="selectedProducts[$index]" ng-options="a as a.nome for a in items" ng-change="selectLot(select1, $index)">
    <option value="">-- Select Product --</option>
  </select>

  <select ng-model="selectedLots[$index]" ng-options="a as a.value for a in selectedProducts[$index].lots" ng-change="lotSelect(select2, $index)">
    <option value="">-- Select Lot --</option>
  </select>

Вы также хотите обновить функции в вашем контроллере для работы с индексами массива:

$scope.selectLot = function(data, index){
  $scope.Subarray = [];
  for(i=0; i<$scope.items.length; i++){
    if(data == $scope.items[i].id){
      $scope.Subarray[$index] = $scope.items[i].lots;
      $scope.selectedProducts[$index] = $scope.items[i];
      break;
    }
  }
  console.log($scope.Subarray);
}

$scope.lotSelect = function(id, $index) { 
  for(i=0; i<$scope.Subarray[$index].length; i++){
    if(id == $scope.Subarray[$index][i].id){ 
      $scope.selectedLots[$index] = $scope.Subarray[$index][i];
      break;
    }
  }
}

И модальное:

$scope.open = function ($index) {
  // ... 

  modalInstance.result.then(function (selectedItem) {
    $scope.selectedProducts[$index] = selectedItem;
  }, function () {
    $log.info('Finestra selezione prodotto chiusa alle ore: ' + new Date());
  });
person Community    schedule 20.11.2015

arrow_upward
1
arrow_downward

Вероятно, вам не следует использовать SELECT, если вы позволяете выбору происходить в модальном всплывающем окне. Все, что вам нужно сделать, это показать выбранный элемент, что вы можете легко сделать несколькими различными способами. Кроме того, в первом примере функция prodIsChanged(), которая устанавливает подмассив, никогда не вызывается. Более простым решением может быть что-то вроде этого:

   <div>{{mainProduct}}</div>
   <select ng-options="a as a.value for a in selectedProduct"></select>

   var myApp = myApp.controller('Cntrl', function ($scope,$watch) {  
       $scope.mainProduct = '';
       $scope.selecedProduct = '';

       $watch('mainProduct',function(old,new) {
           $scope.selectedProduct = ??? // The mainProduct has changed so set the list of sub products as necessary
       };

   }
person Scott    schedule 20.11.2015