I have a directive that adds text field on the screen through a templateurl. I need each field created to generate an ID of those fields based on the count of existing objects in a div ('# xmain'). I use an If to know which type of field I want to return, but when I change 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%>