Angularjs - Object counter does not work within the directive

Asked

Viewed 91 times

0

I have a directive that adds text field on the screen through a templateurl. I need each field created to generate an ID of these fields based on the count of existing objects in a div('#xmain'). I use an If to know what type of field I want to return, but when changes the field type the count does not work.

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

javascript angularjs asp

  • You can move that part up on https://jsfiddle.net/ ?

  • Difficult because jsfiddle.net does not run ASP. I catch the count of the objects in the div with var counter= Document.getElementsByClassName('fields'). length; and add + 1 to have dynamic id, but each time you change the IF of another button the count does not work.

  • 1

    Apparently your directive is starting twice. What you can do is use this snippet of code every time: var counter = Document.getElementsByClassName('fields'). length; counter+; Always inside the controller function.

  • Thanks @Anderson Rocha put the counter= Document.getElementsByClassName('fields'). length and counter++ on all Ifs and worked correctly

  • Disponi @Alesssandro Barros

1 answer

0


Above the directive I declared the variable as empty

 var counter=""

and within the directive controller doubled in each if the count of div objects.

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

Browser other questions tagged javascript angularjs asp

You are not signed in. Login or sign up in order to post.