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 .
Related
whenever i call for the inputs made inside the table they end being NaN and it then cause all of my code to crash please check out the image attached to this post to get a full picture of what i am talking about, I even went forward to do more and when I call for the input made for user for calculations it gave the html input element instead of the inputted values the user made
whenever i call for the input in the table i get what you see
let $unitload1 = document.getElementById("unitload1");
let $unitload2 = document.getElementById("unitload2");
let $unitload111 = parseInt($unitload1.value);
let $unitload222 = parseInt($unitload2.value);
//grade tables
// const $selectedGrade;
let grading1 = document.getElementById("courseGrade1");
let grading2 = document.getElementById("courseGrade2");
const $gpa = document.getElementById("gpaprint");
const check1 = "yes ooo";
console.log($unitload111, $unitload222);
<table>
<tr>
<td>
<div contenteditable="true">cve 445</div>
</td>
<td>
<div contenteditable="true">RAW MATERIALS</div>
</td>
<td><input type="number" id="unitload1" value="1"/></td>
<td><input type="number" id="courseGrade1" value="1" /></td>
</tr>
<tr>
<td>
<div contenteditable="true">cve 945</div>
</td>
<td>
<div contenteditable="true">RAW MATERIALS</div>
</td>
<td><input type="number" id="unitload2" value="2"/></td>
<td><input type="text" id="courseGrade2" value="2" /></td>
</tr>
</table>
You can try to use Number in place of parseInt to cast the String value to number. Example:
let $unitload222 = Number($unitload2.value);
I have a group of checkboxes inside a table where I want to change the value of a different column in the row when the checkbox is checked. I have researched for a solution but nothing I have found seems to solve my problem. I realize that my stumbling block is my unfamiliarity with jquery so any suggestions would help. Ultimately I wish to total the columns where the change has occurred to get a total. So if an answer included ideas about that as well I would not complain. Thanks as always, you are a great group.
HTML
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
</tr>
jquery
<script>
function changeFee(val) {
$('#amputeeFee').val(), "$50.00";
}
</script>
Fully functioning snippet. No jQuery required!
When the onchange event fires, it checks whether the checkbox was just checked or unchecked, and toggles the price accordingly. It can even be combined with all sorts of other checkboxes.
function togglePrice(element,price){
if(element.checked){
document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) + price;
}else{
document.getElementById("amputeeFee").value = parseInt(document.getElementById("amputeeFee").value) - price;
}
}
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="togglePrice(this,50);"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0"/></td>
</tr>
It works perfectly and you can even set how much the checkbox adds to the cost!
You can get closest tr closest('tr') to assure input in same row with check box and find input with name find("input[name='amputeeFee']") and change value for it.
function changeFee(val) {
var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");
if($(val).prop("checked")){
amputeeFee.val(50.00);
}
else{
amputeeFee.val(0);
}
}
function changeFee(val) {
var amputeeFee = $(val).closest('tr').find("input[name='amputeeFee']");
//console.log(amp.length);
if($(val).prop("checked")){
amputeeFee.val(50.00);
}
else{
amputeeFee.val(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this)"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
</tr>
</table>
To call a JavaScript function like changeFee(val) in an HTML's element event, the funciton has to be called as the same in the script. As all functions in an HTML' event: <element onclick="myFunction()">, and not <element onclick="myFunction"> beacuse it doesn't reconize it's a function in JavaScript.
Then the code will be:
<tr>
<td><input name="amputeeGolfer" type="checkbox" id="amputeeGolfer" value="amputee" onchange="changeFee(this.value)"/>
<label for="amputeeGolfer">Amputee Golfer</label></td>
<td align="left"><label for="amputeeFee">$50.00</label></td>
<td></td>
<td><input name="amputeeFee" type="number" id="amputeeFee" class="tblRight" size="10" value="0.00"/></td>
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;
};
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.
How can I access a given record inside an ngRepeat loop from the controller, ultimately for form validate?
I have the following form which can have records dynamically added/removed by the user:
<table class="table table-condensed span12" id="tableParticipants">
<!-- snip -->
<tbody>
<tr ng-repeat="person in people">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i></td>
</tr>
</tbody>
</table>
On submitting the form I need to make sure that the employee IDs are valid, else I will get a database error. So, when I work through the loop:
$scope.people.forEach(function(element, index, array)
{
if ($element['empid'] == BAD)
{
// set corredponding ngRepeat row to error
}
}
How can I access that given row for the particular record?
You should be able to do something like the following. Add a css class name to the array item and/or an error message. The rest should be handled by Angular which will update. You have options of show/hiding a message, adding a class, etc.
<tr ng-repeat="person in people" ng-class="person.error">
<td><input type="text" pattern="[0-9]*" data-provide="typeahead" placeholder="8675309" ng-model="person.empid"></td>
<td><input type="text" data-provide="typeahead" placeholder="Firstname Lastname" ng-model="person.name"></td>
<td><input type="text" placeholder="Title" ng-model="person.title"></td>
<td style="text-align: center"><i class="icon-remove" ng-click="removeParticipant()"></i> <span>{{person.errorMessage}}</td>
</tr>
if ($element['empid'] == BAD)
{
$element['errorMessage'] = 'Invalid Id'; // could bind or show a span/depends.
$element['error'] = 'error'; // set to whatever class you want to use.
}