Ng-repeat генерирует ошибку при динамическом наборе цвета типа

У меня возникла проблема, когда я использую предупреждение плагина внутри ng-repeat, которое находится внутри другого ng-repeat.

У меня есть экран, где я должен выбрать категорию, а затем мне нужно выбрать некоторые продукты. Эти выбранные продукты отображаются в плагине предупреждений, и у меня есть четыре кнопки для выбора уровня важности выбранного продукта.

Для каждой кнопки установите другой стиль, успех, информацию, предупреждение и опасность в контейнере предупреждений.

Проблема в следующем: если я выбираю две категории и одинаковые продукты для этих двух категорий, когда я изменяю стиль одного продукта, другой тот же продукт также устанавливает стиль.

Мой код:

<div style='position:relative; top:0px; left:0px;' ng-repeat="cid in listaCidSelected[$index]">
    <alert type="{{cid.type}}" close="removerCid(tuss, cid, $index)">
        {{cid.CIDSC_DS_DESCRICAO}}
        <button class="btn btn-xs btn-outline btn-primary" ng-click="definirTipoCid('success', cid, $index)"><label>Sem Importância</label></button>&nbsp;
        <button class="btn btn-xs btn-outline btn-info" ng-click="definirTipoCid('info', cid, $index)"><label>Média</label></button>&nbsp;
        <button class="btn btn-xs btn-outline btn-warning" ng-click="definirTipoCid('warning', cid, $index)"><label>Grave</label></button>&nbsp;
        <button class="btn btn-xs btn-outline btn-danger" ng-click="definirTipoCid('danger', cid, $index)"><label>Gravíssima</label></button>&nbsp;
    </alert>
</div>

Если у меня выбрано две или более категорий и я использую одни и те же продукты для каждой категории, оповещения об этом продукте повторяются в одном стиле: (type="{{cid.type}}")

Дополнение с помощью методов контроллера:

$scope.checkAssociarCidHandler = function(tuss, index, event){
      $scope.listaCheckCid[index] = !$scope.listaCheckCid[index];
      event.currentTarget.innerHTML = $scope.listaCheckCid[index] ? "Finalizar Associação" : "Associar Motivo(s)";
      // Seleciona os checks com as CIDs ja selecionadas
      if ($scope.listaCheckCid[index]){
          for (var i = 0; i < $scope.listaTussSelected.length; i++) {
              if ($scope.listaTussSelected[i].TUSSPR_CD_CODIGO == tuss.TUSSPR_CD_CODIGO){
                  for (var j = 0; j < $scope.listaCidSelected[i].length; j++) {
                      document.querySelector("#ckItemCheckT" + tuss.TUSSPR_CD_CODIGO + 'C' + $scope.listaCidSelected[i][j].CIDSC_CD_CODIGO).checked = true;   
                  }
                  break;
              }
          }
      }
  }


  $scope.checkCidHandler = function(cid, tuss, event){
      for (var i = 0; i < $scope.listaTussSelected.length; i++) {
          if ($scope.listaTussSelected[i].TUSSPR_CD_CODIGO == tuss.TUSSPR_CD_CODIGO){
              // Associa uma CID
              if (event.currentTarget.checked){
                  cid.type = "info";
                  $scope.listaCidSelected[i].push(cid);
              }else{
                  // Desassocia uma CID
                  for (var j = 0; j < $scope.listaCidSelected[i].length; j++) {
                      if ($scope.listaCidSelected[i][j].CIDSC_CD_CODIGO == cid.CIDSC_CD_CODIGO){
                          $scope.listaCidSelected[i].splice(j, 1);
                          break;
                      }
                  }
              }
              break;
          }
      }
  }

  // Define a cor da CID
  $scope.definirTipoCid = function(tipo, cid, index){
      cid.type = tipo;
  }

У кого-нибудь есть идеи? Спасибо.


person Paulo Teixeira    schedule 21.09.2015    source источник
comment
не могли бы вы поделиться кодом вашего контроллера?   -  person Shimon Brandsdorfer    schedule 21.09.2015
comment
Я поделился задействованными методами! Спасибо за ответ Шим бр!   -  person Paulo Teixeira    schedule 21.09.2015


Ответы (2)


Если продукт одинаков в 2 категориях, он изменит оба (поскольку это одни и те же объекты), что вы можете сделать, это клонировать свои продукты для каждой категории раньше.

category.products = angular.copy(original_products)

Что-то вроде этого. Здесь копия документации: https://docs.angularjs.org/api/ng/function/angular.copy

Еще один совет: никогда не меняйте DOM в своем контроллере, используйте для этого директивы.

person Scoup    schedule 21.09.2015
comment
Привет, Scoup, потому что выбор товаров динамический. Я никогда не знаю, когда пользователь выберет тот же продукт. Когда пользователь выбирает другую категорию, эта новая категория может иметь или не иметь некоторые продукты, которые есть в категории предварительного просмотра. Представьте, что вам нужно составить два списка покупок, и в обоих списках вам нужен один коврик для мыши. Спасибо за вашу помощь, и ваш совет! - person Paulo Teixeira; 21.09.2015
comment
Таким образом, вы всегда можете клонировать продукты для категорий, когда вы устанавливаете продукты категории для использования копии, вы будете использовать больше памяти, но я не думаю, что это будет проблемой, если не слишком много продуктов. Я не могу думать иначе. - person Scoup; 21.09.2015
comment
Scoup, я понимаю, почему необходимо делать копию объекта. Это работа, мой друг. Я просто копирую объект и отлично работаю. var novaCid = angular.copy(cid); $scope.listaCidSelected[i].push(novaCid); Еще раз спасибо - person Paulo Teixeira; 21.09.2015

Это основная проблема с Angularjs, она связана с клонированием, на самом деле она предоставляет ссылку на них обоих, а не на данные. Я решил проблему, поместив элементы в отдельный массив или контейнер, тогда у меня все работает нормально. Спасибо

person Dinesh Jain    schedule 21.09.2015
comment
Dinesh, Да, надо копировать объект. Спасибо - person Paulo Teixeira; 21.09.2015