I want to pass the ng-repeat element to javascript function tried but it is not working
<tr ng-repeat="x in myArry">
<td><input type="text" value="{{x.firstname}}" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
<td><input type="text" value="{{x.lastname}}" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
<td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
<!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
</tr>
this my javascript function
function FirstNamseCon(value1,value2) {
document.getElementById('B Madhukar0').value = document.getElementById(value1).value + ' ' + document.getElementById(value2).value;
}
I want to pass the name last name id to function using {{x.firstname}}{{$index}} but I am getting x is undefined error how to solve this
A angular solution will be to use ng-model to update the values
var app = angular.module('my-app', [], function() {})
app.controller('AppController', function($scope) {
$scope.myArry = [{
firstname: 'John',
lastname: 'Thomas',
fullname: 'John Thomas'
}, {
firstname: 'Arun',
lastname: 'Johny',
fullname: 'Arun Johny'
}]
$scope.updateFullName = function(x) {
x.fullname = x.firstname + ' ' + x.lastname
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
<div ng-controller="AppController">
<table>
<tr ng-repeat="x in myArry">
<td>
<input type="text" ng-model="x.firstname" ng-change="updateFullName(x)" />
</td>
<td>
<input type="text" ng-model="x.lastname" ng-change="updateFullName(x)">
</td>
<td>
<input type="text" ng-model="x.fullname">
</td>
</tr>
</table>
</div>
</div>
use angulars ng-blur insted onblur and write your FirstNamseCon in controlles as $scope.FirstNamseCon
Use ng-model instead of value. Just change your code something like this:
<tr ng-repeat="x in myArry">
<td><input type="text" ng-model="x.firstname" id="{{x.firstname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.firstname}}{{$index}})" /></td>
<td><input type="text" ng-model="x.lastname" id="{{x.lastname}}{{$index}}" onblur="FirstNamseCon(this.id, {{x.lastname}}{{$index}})"></td>
<td><input type="text" value="" id="{{x.fullname}}{{$index}}"></td>
<!--<td><label id="{{x.fullname}}{{$index}}"></label></td>-->
</tr>
But you don't have to use the onblur for this.
You can do like this -
onblur="FirstNamseCon('firstName',$index,x)
and in your javascript code you can get id like this.
var id = x[type]+index;
// A['firstName']+0
Doing DOM manipulation inside controller considered as bad pattern,
don't dare to do that if you wanted to manipulate scope variable's
from jQuery.
Use ng-model over the input field to get two way binding feature of angular and then you could easily pass the value of scope ng-model value to your controller.
Also make you function available inside a scope by having, $scope.FirstNamseCon = FirstNamseCon exposed FirstNamseCon method in scope by assigning its reference to scope variable.
Markup
<tr ng-repeat="x in myArry">
<td><input type="text" ng-model="firstName" ng-clur="FirstNamseCon(firstName)" /></td>
<td><input type="text" ng-model="x.lastName" ng-blur="FirstNamseCon(x.lastName)"></td>
<td><input type="text" ng-model="x.fullName" ng-blur="FirstNamseCon(x.lastName)"></td>
</tr>
Related
Actually am using Jqgrid but in browser console html look like this
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value='10'>hello <input>
</td>
<td>
<input type="text" id="priority_2per" value='20'>hellob <input>
</td>
</tr>
</tbody>
there is a column: "priority1" "priority2" which has textbox
$('body').on('change', '#priority_1per', function () {
//debugger;
var priority1 = $(this).val();
var priority2 = $(this).closest("tr").children("td").find("input[type=text]").find("#priority_2per")
alert(priority1)
alert(priority2)
console.log(priority2)
});
=>var priority1 am getting value (this).val()
=> but am not getting value of priority2 column data (i dono am doing crrt traversing or not)
jQuery.fn.init [prevObject: jQuery.fn.init(10)]
length: 0
prevObject: jQuery.fn.init(10) [input#productpriority.form-control.productpriority, input#divisionname.form-control._division.ui-autocomplete-input, input#categoryname.form-control.category.ui-autocomplete-input, input#subcategoryname.form-control.subcategory.ui-autocomplete-input, input#priority_1.form-control.plantname.plantCode1, input#priority_1per.form-control.priority_1per.number, input#priority_2.form-control.plantname.plantCode2, input#priority_2per.form-control.priority_2per.number, input#priority_3.form-control.plantname.plantCode3, input#priority_3per.form-control.priority_3per.number, prevObject: jQuery.fn.init(12)]
[[Prototype]]: Object(0)
this is the error am finding (not an error but mistake in travesal)
PLEASE help me out
html look like
The problem is due to your find() logic. You use the first find() to get both the input type="text" elements, then the second is trying to find a child #priority_2per element inside the first input. This clearly cannot be found as it's not valid HTML.
To fix the problem remove the first find() and add val():
var priority2 = $(this).closest("tr").children("td").find("#priority_2per").val()
However as the elements have id attributes on them, and id have to be unique in the DOM, then the traversal logic is entirely redundant. You can just select by the id directly.
In addition, your HTML is invalid. <input /> elements have no closing tag. Here's a full working example:
$('body').on('change', '#priority_1per', function() {
var priority1 = $(this).val();
var priority2 = $("#priority_2per").val();
console.log(priority1);
console.log(priority2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value="10" />hello
</td>
<td>
<input type="text" id="priority_2per" value="20" />hellob
</td>
</tr>
</tbody>
</table>
I have the table bellow and I want to get the input $('.note') value from the id of the previous input :
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note'></td>
</tr>
So it can be something like that :
$(".student").change(function () {
alert(this.id.parent('td input.note').val())
})
You could use this.value or $(this).val() :
$('.classname').on('click',function(){
console.log(this.value, $(this).val(), this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='classname' id="id_1" value='value_1'/>
<input type='text' class='classname' id="id_2" value='value_2'/>
<input type='text' class='classname' id="id_3" value='value_3'/>
<input type='text' class='classname' id="id_4" value='value_4'/>
Edit :
Go up to the parent tr using .closest('tr') then search for the related input note using .find('.note') and get the value :
$(".student").on('input', function () {
console.log( $(this).closest('tr').find('.note').val() );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" id='student_1' class='student'></td>
<td><input type="text" class='note' value="1111"></td>
</tr>
<tr>
<td><input type="text" id='student_2' class='student'></td>
<td><input type="text" class='note' value="2222"></td>
</tr>
</table>
You can use a combination of closest and find.
$(".student").on('change', function () {
// the student input to which the change event is bound
var $this = $(this);
// Get the wrapper in which the inputs are present
var $closestTr = $this.closest('tr');
// the input vale that is needed
alert($closestTr.find('.note').val());
});
Yes, you can do this $('#' + this.id).val()
You don't need to include the class in the selector because IDs are unique.
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.
}