Develop Reference

AngularJS ng-repeat with track by renders very slow

When using AngularJS ng-repeat with track by in my web application, when the view is updated the old view is still displayed together with the new view during 1 second or so.
The app displays this panel of alarms (it is a home assistant app). Alarms can be enabled, disabled or removed using the icon buttons:
When the user click the icon button in the middle, the view is updated to this:
But when the view is updated, during half a second or so, it is displayed the old view and the new view together at the same time:
Is this a expected behaviout using ng-repeat with track by?. The code in my html view is:
...
<tr ng-repeat= "alarm in GetAlarmsController.alarms track by alarm.getId()" >
<td class="text-right">
<span ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" disabled class="btn btn-danger btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" disabled class="btn btn-success btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
</span>
</td>
<td class="text-right" ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(true, alarm.getId())">
<i class="fa fa-toggle-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(false, alarm.getId())">
<i class="fa fa-toggle-on"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.deleteAlarm(alarm.getId())">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
...
And, in the JS controller:
...
self.getAlarms = function(){
AlarmAPIService.getAlarms()
.then(function(alarms) {
self.alarms = alarms;
},function() {
self.alarms = [];
})
}
...
const ALARMS_REFRESH_TIME_MS = 5000 ;
var refreshAlarmsInterval = $interval(self.getAlarms, ALARMS_REFRESH_TIME_MS);
...
...
self.enableAlarm = function(enable, alarmId){
enableString = (enable ? 'enabled' : 'disabled') ;
AlarmAPIService.enableAlarm(enable, alarmId)
.then(function() {
SweetAlertService.showSuccessAlert('Alarm ' + enableString + ' with success');
},function() {
SweetAlertService.showErrorAlert('Alarm could not be ' + enableString);
})
}
...
Though self.alarm is assigned to a new array of alarms objects in controller, I have checked that the id of this alarms objects remains the same (only changed its state, specifically the enabled state for the alarm enabled)

how can I use ng-model inside ng-repeat loop in AngularJS?

How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>

I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}

<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>

Delete each row in a table using JavaScript

I am working on an application that allows a user to click a delete button on a row in a table, then a confirmation modal should pop up; finally when you click yes, you should be able to delete that row. My code doesn't do that, instead it first deletes the header of which I only want to delete the row I specified, not the header. I used bootstrap for the css.
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("datatable-responsive").deleteRow(i);
$('#confirm-delete').modal('hide');
}
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John </td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View </button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit </button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete" ><i class="fa fa-trash-o"></i> Delete </button>
</td>
</tr>
</tbody>
</table>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>

Use Element.parentNode.parentNode.remove();
function deleteRow(r) {
r.parentNode.parentNode.remove();
//$('#confirm-delete').modal('hide');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="datatable-responsiv">
<thead align="center">
<tr>
<th>
<input type="checkbox" name="prog" id="check-all" class="flat">
</th>
<th>Name of the video</th>
<th>link</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="even pointer">
<td class="a-center btnDelete" data-id="1">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>John</td>
<td>https://www.youtube.com/watch?v=mU2Ej9PrMfY</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
<tr class="odd pointer">
<td class="a-center btnDelete" data-id="2">
<input type="checkbox" class="flat" name="table_records">
</td>
<td>James</td>
<td>https://www.youtube.com/watch?v=ON3Gb9TLFy8</td>
<td>
<button href="#" class="btn btn-primary btn-xs"><i class="fa fa-folder"></i> View</button>
<button href="#" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> Edit</button>
<button href="#" data-toggle="modal" data-target="#confirm-delete" class="btn btn-danger btn-xs btnDelete"><i class="fa fa-trash-o"></i> Delete</button>
</td>
</tr>
</tbody>
<!--model-->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete one track, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok" value="Delete" onclick="deleteRow(this)">Delete</button>
</div>
</div>
</div>
</div>

Assuming that the argument you're passing to your deleteRow function is a grand-child of the row you want to delete, your problem may be that you're calling deleteRow (the DOM method) on the table itself, not the table's tBody. Try
document.getElementById("datatable-responsive").tBodies[0].deleteRow(i);
(edit:) But Rayon's solution is more elegant anyway. Saves you the trouble of getting a reference to the tbody.

Delete generated elements from div angularjs

I want to delete the criteria list item on clicking the delete button. Right now only the filter is getting refreshed. The tables are not being deleted. Suggestions to get through this.
HTML
<ul class="list-unstyled">
<li style="display: inline-block" ng-repeat="crtia in newCriteria" >
<table>
<tr>
<td>
<select class="input-sm" ng-model="crtia.name" ng-options="searchopt for searchopt in searchcriteria " ng-click="searchy.check()"></select>
</td>
<td>
<input class="input-sm " ng-model="crtia.value" placeholder="{{crtia.name}}" ng-change="newList()" ng-click="searchy.check()" />
</td>
<td>
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" ng-click="removeCriteria($index)">
<span class="glyphicon glyphicon-remove" aria-hidden="true" ></span>
</button>
</td>
</tr>
</table>
</li>
</ul>
JS
$scope.removeCriteria=function($index){
$scope.searchy.check();
alert($index);
$scope.newCriteria.splice($index,1);
$scope.newList(); //Refreshes the filter
}

Try this
HTML
<button type="button" class="btn btn-danger btn-xs" aria-label="Left Align" data-ng-click="removeCriteria(crtia)">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
JS:
$scope.removeCriteria = function (sourceToRemove) {
$scope.searchy.check();
var index = $scope.newCriteria.indexOf(sourceToRemove);
$scope.newCriteria.splice(index, 1);
$scope.newList(); //Refreshes the filter
}
Update Plunker

JavaScript snytax error

<button id="KullaniciSec" type="button" runat="server" onserverclick="KullaniciSec_OnServerClick" onclick='<%# string.Format("return SecDegerler(\"{0}\");",Eval("id")) %>' class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç </button>
I will call JavaScript code from this code but I have error message and i will open console
<button onclick="return SecDegerler("23"); __doPostBack('ctl00$ContentPlaceHolder1$griduser$cell0_9$TC$KullaniciSec','')" id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç</button>
how to will be fix? And How to remove __doPostBack?

If i understood everything like you meant it:
<button onclick='return SecDegerler("23");' id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">