How can I display selected value from selectBox. I can't use the ngModel binding property because the number of selectBoxes is dynamically changing.
For example, I will have 50 rooms so I need 50 variables for every selectBox. Is there any other way to do it, or I have to use an array of selected values? This is my current code:
<tr *ngFor="let room of term.rooms">
<th>{{room.name}}</th>
<th><select #box><option *ngFor="let price of getPrices(room.id)" [ngValue]="price">{{price.name}}</option></select></th>
<th><!--ValueHere--></th><!--for example something like this price.value-->
</tr>
Right, you will need an array with 50 variables.
In your template, use ngFor to loop through your array and for each variable, create a dropdown and use [(ngModel)] to bind data.
Let me know if you still couldn't figure out.
Related
Is there a way of changing the sort column in datatable by checking a checkbox ?
When I click a "search button" to get data from database, I want the sort to be whatever the checkboxes as checked, like 1 and 3 or only 2 or only 3 and so on.
example
when i check the box "Nome do Paciente", i want the column "Nome do Paciente" to be the deafult sort for that search.
Documentation OrderBy Filter
The OrderBy Filter can have a collection with the names of columns that you want to order. When you change some check, you can add or remove an element on this array from your controller.
Remmember use this variable in your template. Like this:
<tr ng-repeat="row in rows | orderBy:variableOrderBy">
</tr>
The variable variableOrderBy has the collection of columns.
I have two tables that I want to filter by either using an individual select dropdown in the table row or by selecting multiple checkboxes and bulk updating the scope.
A user should be able to check the records, select the top dropdown status, and then the scope gets updated. If the status is greater than or equal to 1 it goes in one table, if less then it goes in the other table.
Fiddle http://jsfiddle.net/TheFiddler/hxz06sd7/
How can I use the checkboxes to update the checked values based upon selected value?
The select
<select ng-options="item.value as item.displayName for item in StatusDropDown" ng-model="person.status" ng-change="updateSelected()"></select>
updatedSelected should take the checked rows and filter:
$scope.updateSelected = function(statusarg){
//how to set status for selected and update tables
}
Associate ng-model (person.selected) to the checkboxes and on-change, filter them out based on the selected property, and apply the value to them.
$scope.updateSelected = function (statusarg) {
//how to set status for selected and update tables
angular.forEach($scope.people, function(person){
person.selected && (person.status = statusarg);
});
}
Fiddle
Earlier issues with your code was that: You should not use track by with select as syntax they are not meant to work together. You would rarely need to use track by with ng-options. Read this for more details.
I'm can't access the value of the select in the controller when the select is inside an ng-repeat.
Here is the sample of Html (Everything display properly):
<tr ng-repeat="reservationItem in dataList">
<select ng-model="detail" ng-change= "haha($index)" ng-options="n for n in [1,2,3,42]" >
<option value="Choose"> Choose </options>
</select>
</tr>
``
In the controller, inside the function haha() I try to get the value of the selected dropdown:
$scope.haha = function(index){
console.log(index);
console.log($scope.detail);
}
The first console.log always show 0
The second console.log always shows undefined
Can someone tell me how to access the value of a select inside a nested from a controller. ?
Thanks
In this case, you have multiple detail ng-model. This confuses the angular, look at ng-model like an ID. you can't have duplicate. You would need to pull the select out, or attached detail to reservationItem ie. reservationItem.detail
Also, you won't need ng-change as angular autobinds that value to the model.
jsFiddle Demo
I was messing around learning Knockout and I had an issue dealing with the dropdown bindings. Basically it is a mockup of a patient that can have 1 or more diagnosis codes attached.
If you look at my jsfiddle, I have an object with name/value pairs (axis1items) that holds the select list items. I also have an observablearray holding all the results (patientDiags) which is then serialized into JSON.
When you select an item, the value is set as the axis1items item and it is serialized as:
"DiagnosisID":{"dxname":"(V71.81) Abuse and neglect","dxvalue":549}
I would like the final serialized result to be only the dxvalue:
"DiagnosisID": 549
I assume this can easily be done using a computed value, changing the structure of my viewmodels, or some other knockout specific template keyword that I am overlooking?
In addition: any other suggestions on how to improve my code would be greatly appreciated!
You are almost there, you just need to set the optionsValue to your 'dxvalue' property, where the optionsValue parameter
Similar to optionsText, you can also pass an additional parameter called optionsValue to specify which of the objects’ properties should be used to set the value attribute on the <option> elements that KO generates.
So your options binding should look like:
<select data-bind="options: $root.axis1items,
optionsText: 'dxname',
optionsValue: 'dxvalue',
value: DiagnosisID" class="form-control required">
</select>
Demo JSFiddle.
There are several questions very similar to this one yet I have been unable to come up with a solution.
I have a select list using angularJS. I need to use the title attribute so I have an ng-repeat to create the options, there is always a blank option even if I use ng-selected to always select the first option.
Even if I make a selection and the blank option goes away, if I then filter out that selected value the blank will reappear.
I have included a select list using ng-option (which does not include my needed tittle attribute) and a default value to show that the blank will appear after filter.
The behavior I desire would be to never have a blank option (always selecting first option would be fine) and to possibly have a directive per option for special handling of click events.
Thanks in Advance!
JS Fiddle: http://jsfiddle.net/32DFM/3/
<select size="3" ng-model="person.current">
<option ng-repeat="p in people | filter:person.SearchTerm"
ng-selected="$first"
value="{{p}}"
title="{{p.name}}">
{{p.name}}
</option>
</select>
I forked your fiddle (if I may be so blunt): http://jsfiddle.net/XsFe8/2/
This fixes it somewhat. Although I haven't gotten it to work properly together with the filter.
Anyway, what I do here, is to use the person.id as the value on each option.
<select ng-model="person.current">
<option ng-repeat="p in people | filter:person.SearchTerm" ng-selected="$first" value="{{p.id}}" title="{{p.name}}">
{{p.name}}
</option>
</select>
And set the initial calue on the person.current model:
$scope.person.current = $scope.people[1].id;
But it's still not 100% though. I'm a bit stumped to why the blank spaces appear when you filter the select....
An alternative that might or might not work, would be to use something like ng-repeat="p in filterPeople() and filter your array in a filterPeople function. But I'm not sure if this will change anything.
UPDATE: I tested out my suggestion above, here: http://jsfiddle.net/XsFe8/2/
If you set the selected object to be the first object in the filtered array, it works. I do this each time a new filtered array is created:
$scope.filterPeople = function () {
var array = filterFilter($scope.people, $scope.person.SearchTerm);
$scope.person.current = array[0].id;
return array;
};
It looks like things get hairy when another object than what is visible in the select is actually selected. This is kind of understandable :)
Your actual problem is the value in ngModel is referencing a value which doesn't exist in the select anymore.
A solution is to whenever you alter the select options, you also check the person.current to ensure that it points to a valid entry.
This also implies that you might want to move your filter into the controller, and set the options in the scope (you can use the $filter service in your code to get same behaviour there, https://docs.angularjs.org/api/ng/filter/filter). This way you can have a function in your controller checking if person.current is valid, and if not, set it to desired options (e.g. the first one).
the hairyness cited above is due to an empty array when all items are filtered out and is fixed by:
if(array.length>0)
$scope.person.current = array[0].id;
http://jsfiddle.net/b0z6vpr8/
Hope this helps