We Keep Coding

Angular.js - ng-repeat not showing updated array

I have got code that reads the data from the array perfectly when I use a AJAX request. When I push an object to the array however, ng-repeat doesn't render the new row and I have to refresh the page to then fetch the data that was sent to server.
Why does it do this?
Thanks
Javascript
function processError() {
var responseCode = 404;
var error = {};
error["client"] = document.getElementById('client').value;
error["errorMessage"] = document.getElementById('error-message').value;
error["simpleRes"] = document.getElementById('simple-fix').value;
error["fullRes"] = document.getElementById('full-fix').value;
error["reason"] = document.getElementById('reason').value;
var errorJson = JSON.stringify(error);
$.ajax({
url: "../ErrorChecker/rest/error",
type: "POST",
data: errorJson,
contentType: "application/json"
})
.done(function (data, statusText, xhr, displayMessage) {
$('.form').hide();
responseCode = xhr.status;
reloadData(data);
});
function reloadData(data) {
if (responseCode == 200) {
processPositiveResponse(data);
} else {
$('#negative-message').show(1000);
}
}
}
function processPositiveResponse(data) {
$('#positive-message').show(1000);
updateTable(data);
$('#errorTable').DataTable().destroy();
setupTable();
clearInputs();
console.log($scope.controller.errors);
}
function updateTable(data) {
$scope.controller.errors.push({
"id": data,
"client": document.getElementById('client').value,
"errorMessage": document.getElementById('error-message').value,
"simpleRes": document.getElementById('simple-fix').value,
"fullRes": document.getElementById('full-fix').value,
"reason": document.getElementById('reason').value
})
}
HTML
<tbody>
<tr ng-repeat="x in dataCtrl.errors">
<td class="collapsing">
<div class="ui toggle checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td style="display: none">{{ x.id }}</td>
<td>{{ x.client }}</td>
<td>{{ x.errorMessage }}</td>
<td>{{ x.simpleRes }}</td>
<td>{{ x.fullRes }}</td>
<td>{{ x.reason }}</td>
</tr>
</tbody>

That's because you're using jQuery and Angular together. Don't do that. EVER. Angular is not aware of what jQuery is doing, and jQuery is not aware of what Angular is generating in the DOM. Solution : REMOVE jQuery and use Angular's own $http service.
The same way, don't use document.getElementById('full-fix').value. You're taking Angular backwards. Angular generates the DOM from data, so you don't need to select DOM elements to read their value because that value is already in your data.

Update the document. Use scope apply as a quick fix. Not the way to do it imo. But it will solve your problem fast. On my mobile if I do not forget ill update this comment later with more details and best practises. For now a google search to scope apply will help you a long way.

How to display django form object in javascript?

My problem is when I click in my tr, I display a choicefield with {{formFacture.description_article}} but it doesn't work.
When I do td.innerHTML = "test" it does work.
Here is my html code:
<tbody class="table-article-tbody" id="table_article_tbody">
{% for ligne in liste_article %}
<tr id="{{ ligne.ref_article }}">
<td>{{ ligne.descripton_article }}</td>
<td>{{ ligne.compte_article }}</td>
</tr>
{% endfor %}
<tr>
<td>{{ formFacture.description_article }}</td>
<td>{{ formFacture.compte_article }}</td>
</tr>
</tbody>
And here is my javascript code:
<script>
$('#table_article tr').on('click', function(event){
event.preventDefault();
if($(this).attr('id') != undefined){
var $this = $(this);
$.ajax({
type: 'GET',
url : "{% url 'updateligneFacture_tem' %}",
data: $("#form_facture").serialize(),
success : function(data){
$('#contenue_fact').html(data);
$('#table_article tr:last').remove();
var row = $this.attr('id');
var tr = document.getElementById(row);
var td = tr.insertCell(0);
td.innerHTML = "{{ formFacture.description_article }}";
alert(tr);
$('.selectpicker').selectpicker();
},
error : function(){
alert("Erreur update !!");
}
});
}
});
</script>

You are trying set the click event to a table as:
$("#table_article tr").on("click", ...), but you should assign the event to the tr directly
$("#table_article tbody tr").on("click", ...)
or
$("#table_article_tbody tr").on("click", ...)
It's the main reason, you don't set the event to the tr of table correctly.
Also, you can escape the django objects with the filters: safe and scapejs
{{ object|safe }}
{{ object|escapejs }}

ng-repeat takes too much time to render data

I know there are many questions already posted for the same issue but none of the solutions work in my case.
On calling a web service I get JSON response. In this JSON, there are around 2000+ objects from which I need to display data on the table. I want to display all (2000+) records in the table and Yes, I cannot limit or paginate, need to display it on a single page (I know it's stupid but it's the business requirement). I don't need sorting or searching.
Data transfer is about 2MB and the request completes in about 2-4 secs approx. but it takes around 10-15 secs to data render on the page.
Now, what I am looking for is either speed ng-repeat binding things up (if possible) or display the data as soon as I receive it and keep on adding it until all rows are displayed.
Check out the code below :
HTML
<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>Asset Name</td>
<td>Date/ Time</td>
<td>Location</td>
<td>Ignition</td>
<td>Speed</td>
<td>Heading</td>
<td>Direction</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="cols in tableData">
<td>{{ cols.aN }}</td>
<td>{{ cols.dT }}</td>
<td>{{ cols.Lat }}, {{ cols.Lon }}</td>
<td>{{ cols.I }}</td>
<td>{{ cols.S }}</td>
<td>{{ cols.H }}</td>
<td>{{ cols.D }}</td>
</tr>
</tbody>
</table>
JS
var ignition_text = '';
var lat = '';
var lon = '';
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
$scope.$apply(function() {
$scope.tableData.push({
aN: name,
dT: data[i].eventUTCTime,
Lat: data[i].latitudeDegrees,
Lon: data[i].longitudeDegrees,
I: ignition_text,
S: data[i].speedMPH,
H: data[i].longitudeDegrees,
D: data[i].latitudeDegrees
});
});
}
Thanks in advance!

You probably wont need $scope.$apply at all. And even if you need it, you should only use it once you pushed all data to the table. Otherwise, every added entry will force an digest-cycle. Just build your array and assign the finished array to the scope-variable. Then angular will only build the table once.
Depending on the nature of your variable name you may be able to eliminate the array building as well and just use the data you are downloading. Apart from nameyou just use that data anyway.

Here is a plunk that has a similar data size but loads much faster http://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Ka. If you were to make a quick plunk I could use your data and edit your code but from the looks you just need the main assignment to the scope without the apply for the data and add a track by to the ng-repeat. SN: You would want to manipulate your data inside the for loop then do the assignment to the scope.
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
}
$scope.tableData=data;
JS
$http.get("largeData.json").then(function(response) {
vm.test = response.data;
});
HTML
<tbody>
<tr ng-repeat="(key, value) in main.test track by $index ">
<td>{{ value.ask }}</td>
<td>{{ value.bid }}</td>
<td>{{ value.volume_btc }}, {{ value.volume_percent }}</td>
<td>{{ value.last }}</td>
<td>{{ value.timestamp }}</td>
</tr>
</tbody>

A javascript function isn't taken into account in html

I have some javacript functions that I have defined in one scope variable like this:
$scope.salma = {
selectedRestaurants: accounts.selectedRestaurants,
findAllAccountsByRestaurant: function(restaurant) {
angular.forEach(accounts.AllRestaurantAccounts, function(CurrentAllrestaurantAccount) {
if(CurrentAllrestaurantAccount.nameRestaurant === restaurant) {
accounts.currentRestaurantNumberAllAccount = CurrentAllrestaurantAccount.accountNumber;
}
});
return accounts.currentRestaurantNumberAllAccount;
},
findAccountsOptInMAIL: function(restaurant) {
angular.forEach(accounts.AllOptInMAILRestaurantAccounts , function(CurrentAllrestaurantAccountOptInMAIL) {
if(CurrentAllrestaurantAccountOptInMAIL.nameRestaurant === restaurant) {
accounts.currentRestaurantNumberOptInMAIL = CurrentAllrestaurantAccountOptInMAIL.accountNumber;
}
});
return accounts.currentRestaurantNumberOptInMAIL;
}
};
I make a call to these function in my html like this:
<tbody>
<tr ng-repeat="restaurant in salma.selectedRestaurants">
<td>{{ restaurant }}</td>
<td>{{ salma.findAllAccountsByRestaurant(restaurant) }}</td>
<td>{{ salma.findAccountsOptInMAIL(restaurant) }}</td>
</tr>
</tbody>
The first function take effect in the html but the second one doesn't take effect and I don't know why.Have you any suggestions, please?

angularjs 'ng-href' not working

I'm trying to create a link to each id using angularjs ng-href but when I refresh the page, the links don't show up. I even closed the browser and cleared the cache yet nothing is happening. Here is my current code:
<tr ng-repeat="parcel in parcels">
<td><a ng-href="http://www.proj.com/{{ parcel.id }}/edit/"/>{{ parcel.
id }}</td>
<td>{{ parcel.tracking_id }}</td>
<td>{{ parcel.shipper_ref_no }}</td>
$scope.parcels = [];
$scope.scans = [];
$scope.missings = [];
$scope.excludeds = [];
$scope.parcels = Outbound.summaryPageData.parcels;
$scope.scans = Outbound.summaryPageData.scans;
$scope.missings = Outbound.summaryPageData.missings;
$scope.excludeds = Outbound.summaryPageData.excludeds;
});

I think it's a simple HTML syntax error - the <a> tag has no content. Try changing this:
<a ng-href="http://www.proj.com/{{ parcel.id }}/edit/"/>{{ parcel.id }}
to:
<a ng-href="http://www.proj.com/{{ parcel.id }}/edit/">{{ parcel.id }}</a>