Using ng-repeat I'm displaying Item related textboxes and on click of SaveAll button I want to read all text box values based on ITEM ID and Save it to DB.
<tr>
<td>
<table ng-repeat="item in itemDtls">
<tr>
<td>
<label for="lblItemName">Item ID: </label> {{item.ITEM_ID}}
</td>
</tr>
<tr>
<td>
<label for="lblPriority">Item Priority </label>
<input type="text" id="inpPriority" ng-model="ValuesPriority" value="{{item.PRIORITY}}" />
</td>
</tr>
<tr>
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="ValuesComment" value="{{item.COMMENT}}" />
</td>
</tr>
<tr>
</table>
</td>
<tr>
<td>
<button type="submit" ng-click="SaveAll()">SaveAll</button>
</td>
</tr>
Do not use "value" tag instead use "ng-model" only.
Eg:
<td>
<label for="lblComment">Comment</label>
<input type="text" id="inpComment" ng-model="item.COMMENT" />
</td>
So whatever comments you change, it will update in that variable.
Later you can send "itemDtls" in backend to store in DB.
You must need a backend to store in DB.
Related
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
Below is code snippet of my HTML page:
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Aniruddh </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Ajay <td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Vijay </td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group1 </td>
</tr>
<tr>
<td> <input type="checkbox" name="checkbox"> </td>
<td> Group2 <td>
</tr>
</table>
</div>
I am developing a Web application where I send messages to users by the push of a button. I have two HTML tables on my page namely Contacts with "id"="cntList" and Groups "id"="grpList"; where both tables will have names and a checkbox corresponding to them.
When I click on some contact in Contacts table or a group in the Group table, my code should understand whether it is from a Contacts table or it is a Group table and call the function to send the message accordingly.
I am getting how to start with JQuery in this?
You can retrieve the id of the clicked parent table element within event handler by checking the .id property of this, or event.currentTarget using .closest() with table[id$=List] as selector passed, .attr() with "id" as parameter
var selector = "table[id$=List]";
$(selector + " :checkbox").click(function(event) {
console.log($(this).closest(selector).attr("id"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="top">
<button type="button" name="ptmBtn" id="ptmBtn">PTM</button>
</div>
<div id="bottomleft">
<b>Contact List</b>
<table id="cntList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Aniruddh</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Ajay
<td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Vijay</td>
</tr>
</table>
</div>
<div id="bottomRight">
<b>Group List</b>
<table id="grpList">
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group1</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox">
</td>
<td>Group2
<td>
</tr>
</table>
</div>
I've attached the screenshot of my module. I want the store the values('Y','N') of selected checkbox in database
<tr data-ng-repeat="data in RoleOperation track by $index">
<td>{{$index + 1}}</td>
<td>
<label>{{RoleOperation[$index].vname}}</label>
</td>
<td>
<label>{{RoleOperation[$index].id}}</label>
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.viewflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.addflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.editflg[$index]" />
</td>
<td class="text-center">
<input type="checkbox" data-ng-model="data.deleteflg[$index]" />
</td>
</tr>
Here RoleOperation is Object, which contains names of categories.
How to give value to data-ng-model? And how to access particular checkbox in controller?
plz help me..
You can use ng-true-value and ng-false-value to set your preferred values.
To set Y and N use the below code.
<input type="checkbox" data-ng-model="data.viewflg[$index]" ng-true-value="'Y'" ng-false-value="'N'">
-- EDIT --
Here is a sample
I have data list which will display in the form of multiple radio buttons . each row will have 3 fields .
ex: row1:abc , 123 , xyz
row2: xyz , 145 , xyz
now when i select radio button in first row it is selecting second row . How to make that radio row unique ?
<label ng-repeat="list in data">
<table>
<tr
<td rowspan="2" >
<input type="radio" name="select" />
</td>
<td>
{{list.name}}
</td>
<td>
{{list.number}}
</td>
</tr>
<tr>
<td>
{{list.value}}
</td>
</tr>
</table>
Also how do I validate these fields , if they are comming as null I have display error message since it is dynamic data and this page is read only page .
Thanks in advance
For the null validation you can use a conditional in a ng-bind directive and for selecting different values you need a different name for each row
<label ng-repeat="list in data">
<table>
<tr
<td rowspan="2" >
<input type="radio" ng-attr-name="{{'select' + list.number}}" />
</td>
<td ng-bind="{{list ? list.number: 'error name'}}">
</td>
<td ng-bind="{{list ? list.number: 'error number'}}">
</td>
</tr>
<tr>
<td ng-bind="{{list ? list.value : 'error value'}}">
</td>
</tr>
</table>
I'm not sure if the ng-attr-name will work :( please let me know if this works
In html
<table>
<tr ng-repeat="data in list">
<td>
<input type="radio" ng-model="val.value" value="{{$index}}">
</td>
<td>
<span ng-show="data.name">{{data.name}}</span>
<span ng-hide="data.name">Error in name</span>
</td>
<td>
<span ng-show="data.number">{{data.number}}</span>
<span ng-hide="data.name">Error in number</span>
</td>
</tr>
</table>
In controller
$scope.val ={} // take this object this will store current row number
//$scope.val.value // contain row number
var data = $scope.list[$scope.val.value] // this will give u data at that row
I am having a problem with HTML table layout. I have created an HTML form and layout the form using HTML table :
<form id="form1">
<table class="ui-widget">
<tbody>
<tr>
<td>
<label for="CreateName">Name</label>
</td>
<td>
<input type="text" id="CreateName" name="Name" />
</td>
</tr>
<tr>
<td>
<label for="CreateDate">Date</label>
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
..
...
</tbody>
</table>
</form>
I have inserted jquery validation on form fields. Now my problem is when validation error shown, than whole table layout is affected. I used :
table-layout: fixed;
But still it is not working. How can i get rid of this issue ?