动态设置类型颜色时 Ng-repeat 生成错误

Question

当我在其他 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;
  }

有人有什么想法吗？ 谢谢。

Answer 1

如果产品在 2 个类别中相同，那么两者都会更改（因为是相同的对象），您可以做的是之前为每个类别克隆您的产品。

category.products = angular.copy(original_products)

类似的东西。这里是副本文档：https://docs.angularjs.org/api/ng/function/angular.copy

另一个提示，永远不要在控制器中更改 DOM，为此使用指令。

Answer 2

这是 Angularjs 的主要问题，它是在克隆过程中，实际上它提供了对它们两者的引用而不是数据，我通过将元素推送到单独的数组或容器中解决了这个问题，然后可以正常工作我。 谢谢