I have implemented a drop down where i m trying to populate my drop down from database using ng-options but when the data comes it comes in a object which don't have key or value as you can see in image below.I have tried to use ng options as:-
by using ng-option
<tr>
<td nowrap>Billing Method:</td>
<td>
<select id="listBillingMethod" data-ng-options="blngmthod as blngmthod for blngmthod in listBillingMethod" ng-model="custom.listBillingMethod" style="width: 182px !important; height: 34px;"></select>
</td>
<td nowrap></td>
<td></td>
</tr>
If i am trying to do the same using ng-repeater it gives me results as i want,i.e my dropdown will populated up.My ng-repeater code:-
<tr>
<td nowrap>Billing Method:</td>
<td>
<select id="listBillingMethod" style="width: 182px !important; height: 34px;">
<option value="0">--- Select an option ---</option>
<option data-ng-repeat="blngmthod in listBillingMethod">{{blngmthod}}</option>
</select>
</td>
<td nowrap></td>
<td></td>
</tr>
My data comes in form of:-
look at this fiddle you should really use ng-options if ur Data Object has no keys than modify it so it fits for the ng-options example
fiddle
<form>
<select ng-model="group"
ng-options="o.value as o.label for o in myGroups"
ng-change="tellUs()"/>
</form>
Related
I am new to front end programming so hoping to get some guidance. I am developing an application using HTML AngularJs which uses ng-repeat and ng-model and populates multiple rows based on the data in the database for a user. Each row has static data coming from DB (returned as object via restAPI) and dynamic select option for user selection. Select option is hardcoded in app.js and linked to model on HTML for DB update upon selection using update button. Issue is when I select any value from list in one row, this is reflected in the select option on other row. Each row has its own button and i can see update function is working at row level.
Below is HTML and js files
<body>
<h1 align="center">User Tracker</h1>
<div ng-controller="MainController as main">
<div>
<p>Please Enter ID </p>
<p>
<input type="text" ng-model="main.model.userName"></input>
<button ng-click="main.model.getOrgList()">List Org List</button>
</p>
</div>
<hr ng-show="main.model.formSubmitted"></hr>
<div>
<table class="table table-bordered" border="1" ng-show="main.model.formSubmitted">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="org in main.model.orgList" id="{{org.id}}">
<td>{{org.id}}</td>
<td align="center">{{org.user}}</td>
<td align="center">
<select ng-model="main.model.selectedRecord.appCurrentStateSelected ">
<option ng-repeat=" option in main.model.appCurrentStateList " value ="{{option.value}}" id="{{option.id}}"> {{option.name}} </option>
</select>
</td>
<td>
<button ng-click="main.model.updateAppDetailsList({id:org.id,userName:org.name,appCrntState:main.model.selectedRecord.appCurrentStateSelected})">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Full HTML and JS file is here - https://jsfiddle.net/4jbtL0cj/
You are updating the same object which you have set as ng-model for each row (appCurrentStateSelected). This will update the same object and hence affect all rows as the same is set as ng-model for all rows. The ng-model should be an array or array of objects and then it should be set to array[$index], so that the ng-model is seperate for each row ($index is the index of ng-repeat). This is demonstrated in below plunker. You can do the same changes to your code.
http://plnkr.co/edit/FdWJyzNfbISa9NKFsCqt?p=preview
<td><select ng-model="selected[$index]" ><option ng-repeat="d in dropd" value="{{d.value}}" id="{{d.id}}">{{d.name}}</option></select></td>
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 have a <tr> which is controlled via a ng-repeat to pass in an object. One of the <td> elements is a textfield, and I have a function on $scope that returns the # of lines of text. Now, on an another <td> in that same row, I want to add as many select boxes as I have lines in the textfield, so I tried something like this:
<table>
<tr ng-repeat="variable in variables">
<td>
<label for="varValues">Choices:</label>
<textarea class="form-control" ng-model="variable.extras" id="varValues" cols="40" rows="5">{{variable.extras}}</textarea>
</td>
<td>
<table>
<tr element-repeat="numberOfRowsForChoiceVariable(variable)">
<select class="form-control" ng-options="">
<option value="">-- Default Skill --</option>
</select>
</tr>
</table>
</td>
I'm getting just a single <select> element in that second column. How do I make that get re-evaluated when I change the contents of that text field?
You'll need to turn your quantity value into an array. Something like this should do:
$scope.getNumArray = function(num) {
return new Array(num);
}
You'd use this inside numberOfRowsForChoiceVariable(variable) to return the array rather than an integer.
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>
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>