0

Tenho uma directiva que acrescenta campo de texto na tela atraves de um templateurl. Preciso que a cada campo criado gere um ID desses campos com base na contagem de objetos existentes em uma div('#xmain'). Utilizo de um If para saber qual o tipo de campo quero retornar, mas quando muda o tipo de campo a contagem não funciona.

JS

var counter= document.getElementsByClassName('campos').length;    
    function btncampos($compile) {
      return {
        restrict: 'E',
        scope: {titulo: '@',icone:'@',corfundo:'@',tipo:'@'  },
        template: "<button type='button' class='btn btn-{{corfundo}} m-r-sm' ng-click='add()'><i class='fa {{icone}}'></i></button><span class='campos-texto'>{{titulo}}</span>",
        controller: function ($scope, $templateRequest,$element,$templateCache,formsAPI,$window) {        

          $scope.add = function () {
            counter++;            

            if ($scope.tipo=='txtcurto'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=curto").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }
            else if ($scope.tipo=='txtlongo'){              
              $templateRequest("modulos/forms/_textbox?c="+counter+"&t=longo").then(function(html){
                var template = angular.element(html);            
                angular.element('#xmain').append(template)
                el=$compile(template)($scope);
              });
            }            
          };
        }
      };
    }

ASP

<%
codigo = request.querystring("c")
tipo = request.querystring("t")

select case tipo
%>


<%case "curto"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-6 animated bounceInRight" ng-controller="modalCtrl" > 
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%case "longo"%>
<div id="cmp<%=codigo%>" class="campos form-group disabled col-md-12 animated bounceInRight" ng-controller="modalCtrl" >    
    <label data-id="lbl<%=codigo%>" id="lbl<%=codigo%>" >{{titulo}}</label> 
    <div class="input-group">
        <input type="text" class="form-control">        
        <span class="input-group-btn"> 
            <button type="button" class="btn btn-default" ng-click="openmodal('lbl<%=codigo%>')"><i class="fa fa-pencil"></i></button> 
            <button type="button" class="btn btn-default" ng-click="remove(<%=codigo%>)"><i class="fa fa-remove"></i></button>              
        </span>
    </div>
</div>



<%end select%>

Result enter image description here

5
  • Você consegue subir essa parte no jsfiddle.net ? Commented 1/11/2016 às 17:09
  • Dificil porque no jsfiddle.net não roda ASP. Eu pego a contagem dos objetos na div com var counter= document.getElementsByClassName('campos').length; e acrescento + 1 para ter o id dinamico, mas cada vez que muda o IF de outro botão a contagem não funciona. Commented 1/11/2016 às 17:17
  • 1
    Aparentemente sua diretiva está iniciando duas vezes. O que você pode fazer é usar esse trecho de código toda vez: var counter = document.getElementsByClassName('campos').length; counter++; Sempre dentro da função do controller. Commented 1/11/2016 às 17:31
  • Obrigado @Anderson Rocha coloquei o counter= document.getElementsByClassName('campos').length e counter++ em todos os IFs e funcionou corretamente Commented 1/11/2016 às 17:56
  • Disponha @Alesssandro Barros Commented 1/11/2016 às 18:26

1 Resposta 1

0

Acima da directiva eu declarei a variavel como vazia

 var counter=""

e dentro do controller da directiva dupliquei em cada if a contagem de objetos da div.

if ($scope.tipo=='txtcurto'){
  counter= document.getElementsByClassName('campos').length;
  counter++                  
  $templateRequest("modulos/forms/_textbox?c="+counter+"&t=curto").then(function(html){
    var template = angular.element(html);            
    angular.element('#xmain').append(template)
    el=$compile(template)($scope);
  });
}
else if ($scope.tipo=='txtmedio1'){              
  counter= document.getElementsByClassName('campos').length;
  counter++
  $templateRequest("modulos/forms/_textbox?c="+counter+"&t=medio1").then(function(html){
    var template = angular.element(html);            
    angular.element('#xmain').append(template)
    el=$compile(template)($scope);
   });
}//if

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .