My goal is to pass value from jsp to servlet. I managed to pass the values of reservationId and tableId but NOT staffId.
The error was:
java.lang.NumberFormatException: For input string: "staffId"
Why is that so? Is it because staffId is retrieve from DROPDOWN LIST?
Help will be appreciated!
<c:forEach items="${table}" var="table">
<tr>
<td>${table.reservationId}</td>
td><select name="staffId">
<c:forEach var="staff" items="${staff}">
<option value="${staff.staffId}">${staff.staffName}</option>
</c:forEach>
</select>
</td>
<td>
<a href="TableEditServlet?action=assign&reservationId=<c:out value="${table.reservationId}"/>&tableId=<%= request.getParameter("tableId") %>&staffId=<c:out value="${staff.staffId}"/>">
<input value="Assign" class="btn"></a></td> </tr>
</c:forEach>
You should use JavaScript or JQuery to get data from <select name="staffId" id="someId"> for the selected row.
UPDATE (using javascript)
... add this javascript section before <body>
<script>
function assign(reservationId) {
document.location="TableEditServlet?action=assign&reservationId="+reservationId+"&staffId="+document.getElementById("staffId_"+reservationId).value;
// add tableId if you need as well
}
</script>
...
<c:forEach items="${table}" var="table">
<tr>
<td>${table.reservationId}</td>
<td>
<select name="staffId" id="staffId_${table.reservationId}">
<c:forEach var="staff" items="${staff}">
<option value="${staff.staffId}">${staff.staffName}</option>
</c:forEach>
</select>
</td>
<td>
<input value="Assign" class="btn" onclick="assign('<c:out value="${table.reservationId}"/>')">
</td>
</tr>
</c:forEach>
Related
I want to track the expanded row and save that form with city and work details, the problem is while clicking on the particular row it's expanding with form but I can't able to track that row...
var app = angular.module('app', ['ngAnimate']);
app.controller('itemsController', function( $scope ) {
$scope.divisions = [{id:12, div_name:' city1'},
{id:13, div_name:' city2'},
{id:14, div_name:' city3'}];
$scope.works =[{wid:111, w_name:'work1'},
{wid:222, w_name:'work2'},
{wid:333, w_name:'work3'}];
});
html
<div ng-controller="itemsController" class="box">
<table border="1">
<tbody ng-repeat-start="division in divisions">
<td>
{{division.div_name}}
<em>{{expanded}}</em>
</td>
<td>Values: {{divisions.length}}</td>
<td>
<button type="button" ng-click="expanded = !expanded">
Expand
</button>
</td>
</tbody>
<tbody ng-repeat-end ng-show="expanded">
<td colspan="3">
<select ng-model="result.division.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works">
{{work.w_name}} <input type=text />
</ul><br/><br/>
<button ng-click="save()">save</button>
</td>
</tbody>
</table>{{result |json}}
link - http://jsfiddle.net/raju10281/eqk6attx/18/
Thank You in advance!!!
Try this solution. You should create object(ng-init='data={}') for each ng-repeat. It will present content of each form, then you can use it inside your controller(ng-click="save(division, data)") with appropriate division:
<tbody ng-repeat-end ng-show="expanded" ng-init='data={id:division.id,div_name:division.div_name,works:[]}'>
<td colspan="3">
<select ng-model="data.tt">
<option value='01'>tt1..........</option>
<option value='02'>tt2..........</option>
</select><br/><br/>
<ul ng-repeat="work in works" ng-init='data.works[$index]={wid:work.wid,w_name:work.w_name}'>
{{work.w_name}} <input type=text ng-model='data.works[$index].input' />
</ul><br/><br/>
<button ng-click="save(division, data)">save</button>
</td>
</tbody>
I want to pass two values in select dropdown.
Here is my code.
<tbody>
<tr ng-repeat="x in studyTeamObj" align="center">
<td>
<select class="form-control" ng-model="x.Designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x.Designation}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{x.Emp_Id}}
</td>
<td>
{{x.Designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
This is what the data I am getting from {{createStudyObj.Study_User}}
[{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
when I click on emp name from the dropdown,it should fetch Emp_Id and Designation.But I am getting only the Designation.Plz help
Assign object to value instead of one property. That's way whole object bind to ng-model and you can filter relevant properties from that.
<option ng-repeat="x in createStudyObj.Study_User"value="{{x}}">{{x.Emp_Name}}
</option>
The downfall of this is when u access the model variable from the controller value assign as string. so you need to parse the value to object using JSON.parse()
$scope.designation = JSON.parse($scope.designation)
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation">
<option value=""></option>
<option ng-repeat="x in createStudyObj.Study_User"
value="{{x}}">{{x.Emp_Name}}
</option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
But I recommend to use ng-options instead of the ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.createStudyObj = {};
$scope.createStudyObj.Study_User = [{"Emp_Name":"mdrf","Emp_Id":2,"Designation":"Research Dietitian","DesignationID":20},{"Emp_Name":"Sudha","Emp_Id":1045,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1046,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1047,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1048,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"kavyad","Emp_Id":1049,"Designation":"MDRF HOD","DesignationID":16},{"Emp_Name":"fdgedd","Emp_Id":1050,"Designation":"MDRF HOD","DesignationID":16}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tbody>
<tr >
<td>
<select class="form-control" ng-model="designation" ng-options="item as item.Emp_Name for item in createStudyObj.Study_User">
<option value=""></option>
</select>
</td>
<td>
{{designation}}
</td>
<td class="mdrf-add-row-col">
<i class="fa fa-minus-circle"
data-ng-click="deleteMem($index)"></i>
</td>
</tr>
</tbody>
</table>
</div>
You should be using ng-options instead of building your own options list. https://docs.angularjs.org/api/ng/directive/ngOptions
If you have problems with that, add those questions up top and I will update my answer.
I have the following sample model:
{
a:{
x:0,
z:0,
f:1
},
b:{
x:"a",
u:"b"
}
}
Which I render into two different tables
<div class="col-sm-5">
<h1>A</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.a">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col-sm-5 col-md-offset-2">
<h1>B</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.b">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
The tables are dynamic, which means I can add new rows to it.
Now when I change any values inside the table, they aren´t synchronized with the model -> Editing not possible
What do I need to do to store changes automatically in the original
model?
If this is not possible, how can I get a Json Schema from my table
like the one the tables are rendered from, so that I only have to
overwrite the old one?
First off you can't dynamically change an object property name or key. So what you are trying to do with ng-model="key" simply won't work.
As far as the value part you should be using the object reference in your ng-model
<tr ng-repeat="(key,value) in schema.b">
<td>{{key}}</td>
<td>
<input type="text" ng-model="schema.b[key]" required>
</td>
<td></td>
</tr>
if you need to be able to edit the key then you need to change your data structure to an array of objects with each object having the same property names for keys
I am using ng-repeate in my table for building rows.
In each row i have select. In each select i want to select one of the options according to my $scope.vehicles.
This is an HTML:
<div ng-app="MyApp" ng-controller="MyController">
<div id="vehicleDetails">
<table id="tblVehicles">
<tr>
<th>Number</th>
<th>Model</th>
</tr>
<tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
<td>{{vehicle.PlateID}}</td>
<td>
<select required ng-model="vehicles.ModelID" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description for m in models" >
<option value="">Select Value</option>
</select>
</td>
</tr>
</table>
</div>
</div>
This is JS:
angular.module('MyApp',[])
.controller('MyController',function($scope) {
$scope.vehicles=[{"PlateID":"55533322","ModelDescription":"OPEL","ColorDescription":"blue","ModelID":194,"ColorID":13},{"PlateID":"66688822","ModelDescription":"Mercedes","ColorDescription":"blue","ModelID":238,"ColorID":13}];
$scope.models=[{"iD":35,"description":"BMV"},{"iD":193,"description":""},{"iD":194,"description":"OPEL"},{"iD":214,"description":"Toyota"},{"iD":215,"description":"Honda"},{"iD":238,"description":"Mercedes"},{"iD":260,"description":"Houndai"}];
});
I build the dropdowns but i can not set selected value in each dropdown.
JSFiddle: https://jsfiddle.net/ndprdffa/
Does somebody can help?
Thanks!
Use this
<div ng-app="MyApp" ng-controller="MyController">
<div id="vehicleDetails">
<table id="tblVehicles">
<tr>
<th>Number</th>
<th>Model</th>
</tr>
<tr class="vehiclesRepeat" ng-repeat="vehicle in vehicles">
<td>{{vehicle.PlateID}}</td>
<td>
<select required ng-model="vehicle.ModelDescription" id="vehicleModel" class="txtPersonalDetails" ng-options="m.description as m.description for m in models" >
</select>
</td>
</tr>
</table>
</div>
</div>
Please refer the fiddle "https://jsfiddle.net/ndprdffa/1/".
Explaination
As the docs explains, when you use an expression such as
label for value in array
what is displayed in the select box is label, and what is bound to the ngModel is value. So, in your expression:
ng-model="vehicle.ModelDescription"
ng-options="m.description for m in models"
mis one of the objects in the array of models. And if you want the object to be the one selected in the select box, your ngModel should be a reference to this object not only the value
Or, if you want the ngModel to contain the string value of vehicle.ModelDescriptionand not the object containing this value, the expression should be
ng-options="m.description as m.description for m in models"
I use ng-hide and a selectbox to hide/show columns of my table .
HTML
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr>
<td ng-hide="myOption=='one'"><input ng-hide="myOption=='one'"></input></td>
<td ng-hide="myOption=='one' || myOption=='two' "><input ng-hide="myOption=='one' || myOption=='two' "></input></td>
</tr>
</tbody>
</table>
<select ng-model="myOption">
<option value="one">test1</option>
<option value="two">test2</option>
<option value="three">test3</option>
</select>
</div>
It works well.
Here is a fiddle to demonstrate it: Fiddle
Question
How can I clear the values of the hidden input to avoid errors in my calculation? In jQuery i know the solution, but I want to learn AngularJS
You can use ng-change="[second='', first='']" to clear out the input fields, otherwise if you want more functionality to be done at the time of on-change use a function call at ng-change="someFunction()"
simply if you want to clear the input field which you have shown in jsfiddle you can try this
Working Code
<div ng-controller="MyCtrl">
<table>
<tbody>
<tr>
<td ng-hide="myOption=='one'"><input ng-model="first" ng-hide="myOption=='one'"></input></td>
<td ng-hide="myOption=='one' || myOption=='two' "><input ng-model="second" ng-hide="myOption=='one' || myOption=='two' "></input></td>
</tr>
</tbody>
</table>
<select ng-model="myOption" ng-change="[second='', first='']">
<option value="one">test1</option>
<option value="two">test2</option>
<option value="three">test3</option>
</select>
</div>