Develop Reference

Maximum call stack size exceeded in AngularJS

I am loading data from SQL table using AngularJS and web API. I made a function that shows values in input texts when a row is selected from HTML table. I got this error when i click on any row on the html table when debug.
The HTML
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" required autofocus ng-model="selectedMember.Code.Staff_Type_Code">
<input type="text" size="10" hidden ng-model="selectedMember.sys_key" /> </td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" required size="35" ng-model="selectedMember.Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" required size="35" ng-model="selectedMember.Local.A_Desc"></td>
</tr>
<tbody>
<tr ng-repeat="c in Contracts | filter:selectedMember.Code | filter:selectedMember.Latin | filter:selectedMember.Local ">
<td style="display:none;">{{c.sys_key}}</td>
<td>{{c.Staff_Type_Code}}</td>
<td>{{c.L_Desc}}</td>
<td>{{c.A_Desc}}</td>
<td>{{c.Hours_Day}}</td>
<td>{{c.Days_Week}}</td>
<td>{{c.Type_EndWork}}</td>
<td>{{c.Num_EndWork}}</td>
</tr>
</tbody>
Controller.js
$scope.selectedMember = { Code: "",sys_key:"", Latin:"" , Local:"", Hours_Day :"", Days_Week:"", Num_EndWork:"" }
$scope.showInEdit = function (member)
{
debugger;
$scope.selectedMember = member;
$scope.selectedMember.Code = member;
$scope.selectedMember.Latin = member;
$scope.selectedMember.Local = member;
}
when I comment the last 3 lines, selected row values are not displayed in input texts. or i must cancel the filter. is there is a way to work both both
Any help would be appreciated , thanks in advance

You can sometimes get this if you accidentally import/embed the same JS file twice, worth checking in your resources tab of the inspector . or if you are calling a function which is calling another function and so forth .

Angular.Js dynamically updating an input with sum of other 3 inputs

I have a table with 6 rows and 4 columns (the fourth one is a Total: which should be a sum of the above 3 columns). Basically what I want to do is calculate the sum of each column and show the total number in the fourth column. My table is generated using ng-repeat.
Something like:
<table>
<thead>
<tr>
<th ng-repeat="item in items">{{item}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>Input1:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row1">
</td>
</tr>
<tr>
<td>Input2:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row2">
</td>
</tr>
<tr>
<td>Input3:</td>
<td ng-repeat="collection in collections">
<input type="text" ng-model="collection.row3">
</td>
</tr>
<tr>
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{collection.total}}
</td>
</tr>
</tbody>
</table>
"collections" from ng-repeat would be an array with 6 objects which I'm getting from an API using a GET method and storing my data in a $scope.
"Total" row with ng-model is coming from backend with the calculus already done but I need a way to show it on client as it is updating dynamically.
I've tried $watch and $watchCollection and also ng-change but I can't find a way to make it work. In my controller I used a for to go through my array of objects and tried to sum every [i] position but that didn't work.
Is there another solution for my issue?
Here is what I tried in my controller:
$scope.collections = [];
$scope.getTotal = function(){
var total = 0;
for(var i = 0; i < $scope.collections[i].length; i++){
var myItems= $scope.collections[i];
total = (myItems.row1+ myItems.row2+ myItems.row3);
}
return total;
};
Thank you.

Why not simply do it in the template?
<td>{{collection.row1 + collection.row2 + collection.row3}}</td>
Also, there should not be an ng-model unless it is an <input>. That's probably where your main error is. Ng-model will try to set the value inside the <td>'s, and so the angular template ({{X}}) and ng-model are competing for the display value inside the <td></td> in your code given

If you calculate the total in the back-end
$scope.CalculatedTotal = Some Value;
so you can call in the last row:
<td>Sum:</td>
<td ng-repeat="collection in collections" ng-model="collection.total">
{{CalculatedTotal}}
</td>
or store the CalculatedTotal in to the object
currentCollection.Total = CalculatedTotal;
something like that

accessing object that is creating from a form submission

I am in the process of learning angular. I've created a simple HTML form and want that submission to create an object that I can access in other tables.
Code from 1 row of the HTML table/form
<tr>
<td>Q1</td>
<td><input type="number" ng-model="stateAid.WADM_Q1" placeholder="0"></td>
<td><input type="text" ng-model="stateAid.Foundation_Aid_Q1" placeholder="$0.00" class="currency"></td>
<td><input type="text" ng-model="stateAid.Salary_Q1" class="currency" placeholder="$0.00"></td>
<td><input type="text" ng-model="stateAid.Transport_Q1" class="currency" placeholder="$0.00"></td>
<td> {{ final_total_Q1 | currency }} </td>
<td></td>
<td></td>
<td></td>
</tr>
Angular Code:
app.controller('StateAidTable',function($scope) {
$scope.master={};
$scope.update =function(stateaid){
$scope.master = angular.copy(stateaid);
$scope.WADM_q1 = stateaid.WADM_Q1;
};
since the stateaid object has been copied to the $scope.master, does that mean that the master is now the object that I use to access the object's properties in the template. Thanks for the help!

Working absolutely fine link for the solution i have performed it for Q1, you can do it similarly for rest of them: http://plnkr.co/edit/Aabu35evC5GVhfuVLOHA?p=preview
$scope.update = function(stateaid) {
debugger
console.log($scope.stateAid.Foundation_Aid_Q1);
$scope.final_total_Q1=parseInt($scope.stateAid.Foundation_Aid_Q1+$scope.stateAid.Salary_Q1+$scope.stateAid.Transprot_Q1);
console.log($scope.final_total_Q1)
$scope.master = angular.copy(stateaid);
return $scope.master;
};

Add new columns with specific ng-model to HTML table

So I am trying to add additional columns to a table inside a form. Adding the columns themselves is not that difficult but I don't know how to go about setting their ng-models.
This is my current code:
(HTML)
<button ng-click="add()" type="button">+ column</button>
<table>
<thead id="inputtablehead">
<th class="theadlabel">(in 1.000 EUR)</th>
<th>{{startyear}}</th>
<th class="NBBCodesHeader">NBB Codes</th>
<th>Source</th>
</thead>
<tbody class="input">
<tr>
<td>number of months</td>
<td>
<input ng-model="input{{startyear}}.NumberMonths" type="text" class="{{startyear}}" required>
</td>
<td class="NBBCodes"></td>
</tr>
<tr>
<td>Fixed assets</td>
<td>
<input ng-model="input{{startyear}}.FixedAssets" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">20/28</td>
</tr>
<tr>
<td>Inventory</td>
<td>
<input ng-model="input{{startyear}}.Inventory" class="{{startyear}}" type="text" required>
</td>
<td class="NBBCodes">3</td>
</tr>
</table>
(JS)
angular.module("inputFields", []).controller("MyTable", function ($scope) {
$scope.startyear = new Date().getFullYear();
var nextyear = new Date().getFullYear() - 1;
$scope.add = function () {
$(".NBBCodesHeader").before("<th>"+nextyear+"</th>");
$(".input .NBBCodes").before('<td><input class='+nextyear+' type="text" required></td>');
nextyear--;
};
});
So in my JS the <input class='+nextyear+' type="text" required> should become something like <input ng-model="input'+nextyear+'.NumberMonths" class='+nextyear+' type="text" required> for the <td> element added next to the 'number of months' row.
I was thinking to give ea row an id in the form of NumberMonths and then look up the id when adding the column.
So my question would be: is this a valid way to do it and how would I get this id? Or am I overthinking it and is there an easier way to do this?

Use standard javascript [] object notation for variable property names.
<input ng-model="input[startyear].Inventory"

You shouldn't do DOM manipulations from a controller. It's not a good practice when working with AngularJS. A good rule to remember that is: don't use jQuery. It's a common mistake when starting working with AngularJS. And, in case you would be completely sure that you need to modify the DOM, do it always from a directive.
About your problem, maybe you can base your solution in create a data structure in your controller (a Javascript Object), and render it through a ng-repeat in your template. This way, if you modify the object (adding a new column), the template will be automatically updated.

AngularJS, easy way to show a delete button when a checkbox is checked in the list of users under ng-repeat

I am trying to toggle a delete button which has already a function bound to it. The list is created with ng-repeat checking the users object. But the methds I have seen so far are either simple model show which does not work in my case. Or complex directive controller methods.
All I need is to check whether at least one checkbox is checked. Here is the snippet from the code:
<table class="table">
<tr ng-repeat="user in ctrl.commonUserService.users | filter:ctrl.commonUserService.suppressLoggedOnUserFilter()">
<td><input type="checkbox" ng-model="user.selected" value="y" /></td>
<td title="User Name"><strong>{{user.userName}}</strong></td>
How can I easily do this with Angular? I tried to create a function looping users and looking if they are selected at all but don't think I can put this function to ng-show.

You'll have to check if at least one box is selected when the state changes:
<td><input type="checkbox" ng-model="user.selected" ng-change="ctrl.userSelected()" value="y" /></td> <!-- use ng-change to notify when a checkbox is clicked -->
<button ng-click="ctrl.delete()" ng-show="ctrl.usersSelected">Delete</button> <!-- if ctrl.usersSelected is true show delete -->
In the controller:
this.userSelected = function userSelected() { // when checkbox is clicked check users to see if at least one is selected and save the state in this.userSelected
this.usersSelected = this.commonUserService.users.some(function(user) {
return user.selected;
});
};

You can do this fairly easily using the ng-change directive on your inputs. See this plunkr for the working example, but it basically goes like this:
View:
<table class="table">
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-change="isSelected()" ng-model="user.selected" /></td>
<td title="User Name"><strong>{{user.userName}}</strong></td>
</tr>
</table>
<button class="delete" ng-show="showDelete">Delete</button>
Controller:
$scope.isSelected = function() {
var somethingSelected = false;
$scope.users.forEach(function(user, index) {
if (user.selected) somethingSelected = true;
});
$scope.showDelete = somethingSelected;
};