Appending <tr> </tr> <li></li> through directive.js, I have modal box that
contain ul list and table list contain user name with check box, and while
clicking on check box it's delete the li where you click and append the
<tr> to tbody, now tbody contain usename with check box . one more time if
you click on checkbox of tr then it's delete the data and append to li
issue is sometime it's not append the li and tr
my code for modal
<div class="modal-header">
<button aria-hidden="true" ng-click="cancel()" class="close" type=
"button">×</button>
<h2>Setting group pick-up...</h2>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-3">Name this ring group</label>
<div class="col-lg-6">
<input type="text" class="form-control" value="" ng-model=
"selected.text" >
</div>
</div><br><br>
<div class="form-group">
<label class="col-lg-3"> Ring Strategy</label>
<div class="col-lg-6">
<select class="form-control uniformselect" ng-model=
"selected.item">
<option value="">Select Ring Strategy</option>
<option value="At the same time"> At the same time
</option>
<option value="In order"> In order</option>
</select>
</div>
</div><br><br>
<div class="form-group">
<label class="col-lg-3">Ringback</label>
<div class="col-lg-6">
<select class="form-control uniformselect" ng-model=
"selected.item">
<option ng-repeat="item3 in list3" >
{{item3.name}}
</option>
</select>
</div>
<div class="form-group">
<label class="col-lg-6"></label>
<div class="col-lg-0">
<a style="cursor: pointer;" ng-click=
"editUserFunc(selected.item)"><h6>Create</h6></a>
</div>
</div>
</div><br>
<br>
<div class="col-lg-6">
<div class="tabbable">
<ul class="nav nav-tabs buttons-icons">
<li class="active"><a style="cursor: pointer;"
data-toggle="tab" data-target="#basic1">User</a></li>
<li><a style="cursor: pointer;" data-toggle="tab"
data-target="#callerId">Devices</a></li>
</ul>
<div class="tab-content">
<div id="basic1" class="tab-pane active" >
<ul id="list1" ng-repeat="item1 in list1">
<li id={{item1.id}} > <input type="checkbox"
value="{{item1.id}}" ng-click="checked(item1.username,item1.id)">
{{item1.username}} </li>
</ul>
<ul device-data template="{{oldTransaction}}">
</ul>
</div><!--tab-pane-->
<div id="callerId" class="tab-pane">
<ul id="list2" ng-repeat="item2 in list2">
<li id={{item2.id}}> <input type="checkbox" value=
"{{item2.id}}" ng-click="Nextchecked(item2.name,item2.id)"> {{item2.name}}
</li>
</ul>
<ul dev-data template="{{revTransaction}}">
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="jarviswidget jarviswidget" data-widget-editbutton=
"false" id="wid-id-mr">
<header>
<span class="widget-icon"> <i class="fa fa-table"
></i> </span>
<h2>Ring Group</h2>
</header>
<div>
<div class="jarviswidget-editbox"></div>
<div class="widget-body no-padding">
<table id="sort" class="table table-striped
table-bordered table-hover" width="100%">
<thead>
<tr>
<th>
Ring Group
</th>
<th>
Delay(s)
</th>
<th>
Timeout(s)
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody compile-data template=
"{{newTransaction}}">
</tbody>
</table>
</div> <!-- end widget content -->
</div> <!-- end widget div -->
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
Code for Controolers
$scope.checked = function(user, Id){
inc++;
$("#"+Id).remove();
$scope.newTransaction = tempService(user, Id, inc);
$scope.endpoints.push({"timeout":$scope.selected.Timeout, "delay":
$scope.selected.Delay, "id":Id,"endpoint_type":"user"});
console.log($scope.endpoints);
}
$scope.reverse = function(user, Id, inc){
var index = functiontofindIndexByKeyValue($scope.endpoints, "id", Id
);
$scope.endpoints.splice(index, 1);
inc++;
$scope.oldTransaction = reverseService(user, Id, inc);
var revId = $("#delete").closest('tr').attr('id');
console.log(revId);
$("#"+revId).remove();
}
$scope.revChecked = function(user, Id, inc){
$scope.endpoints.push({"timeout":$scope.selected.Timeout, "delay":
$scope.selected.Delay, "id":Id,"endpoint_type":"user"});
inc++;
$scope.newTransaction = tempService(user, Id, inc);
var norev = $("#reverse").closest('li').attr('id');
console.log(norev);
$("#"+norev).remove();
}
code for Directive
Enter code here...callflowCtrl.directive('compileData', function ($compile)
{
return {
scope: true,
link: function ( scope, element, attrs, controller ) {
var elmnt;
attrs.$observe( 'template', function ( myTemplate ) {
elmnt = $compile( myTemplate )( scope );
element.append( elmnt );
});
}
};
});
callflowCtrl.factory( 'tempService', function () {
return function (user, Id, inc) {
return "<tr id="+inc+"><td>"+user+"</td> <td> <input type='text'
class='form-control' value='0' name='disaPopnumb'
ng-model='selected.Delay'></td> <td><input type='text' class='form-control'
value='20' name='disaPopnumb' ng-model='selected.Timeout'> </td> <td><a
style='cursor:pointer'><i id='delete' ng-click=\"reverse('"+user+"','"+Id+
"','"+inc+"')\" class='fa fa-trash-o large'></i></a></td> </tr>";
};
});
callflowCtrl.directive('deviceData', function ($compile) {
return {
scope: true,
link: function ( scope, element, attrs, controller ) {
var elmnt;
attrs.$observe( 'template', function ( myTemplate ) {
elmnt = $compile( myTemplate )( scope );
element.append( elmnt );
});
}
};
});
callflowCtrl.factory( 'reverseService', function () {
return function (user, Id, inc) {
return "<li id="+inc+"> <input id='reverse' ng-click=\"revChecked('"
+user+"','"+Id+"','"+inc+"')\" type='checkbox'>"+user+"</li>";
};
});
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
