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.
Related
I have a service table in database with 5 rows and I'm displaying it through ng-repeat. I want to select only one checkbox value
<tbody>
<tr data-ng-repeat="serviceTable in dataTable ">
<td> {{ serviceTable.serviceId }} </td>
<td> {{ serviceTable.serviceName }} </td>
<td> {{ serviceTable. amount }} </td>
<td><input type="checkbox" ng-model="?????"></td>
</tr>
</tbody>
How do I bind only one value in ng-model???
Just like that:
<input type="checkbox" ng-model="item.yourBoolValue">
You can also provide two additional directives to use specific values for checked and unchecked style:
<input type="checkbox" ng-model="item.checkValue" ng-true-value="1" ng-false-value="0">
Edit:
I didn't understand the question at first.
Don't you want to use radio buttons for that?
<input type="radio" name="radioGroupName" ng-model="item.boolValue" />
They provide you with the ability to select only 1 item out of your group (thats why you have to set the name property) without any additional logic.
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 to write something like that
<table>
<tr ng-repeat="pers in persons">
<td>
<select id="person{{pers.id}}">
<option ng-repeat="city in cities" value="{{city.id}}" ng-selected="isOptionSelected(pers,city)">{{city.name}}</option>
</select>
</td>
</tr>
</table>
But I'm facing some showing problems on IE and I suppose that write something wrong.
Have I to fix a ng-model on the select?
Thanks in advance
You should use the pers.id as an ng model for the select, and use ng-options for the select's options.
<select ng-model='person-{{pers.id}}'
ng-options="city.name for city in cities">
You can set the default selection in the controller.
Docs for ng-repeat here
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>