Angularjs - Access the value of dropdown in a nested ng-repeat - javascript

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.

Related

Angular 4 Select don't update on ngModel change

I am trying to make that after new value is selected, I call eventChange() function and restore selected value to default. But what happens: ngModel value updates, but selected value stays the same. How should I do that selected value and ngModel value would be the same?
HTML file
<select [(ngModel)]="selectedValue"
(change)="eventChange()"
>
<option [disabled]="true"
[ngValue]="-1">
Choose an option
</option>
<option *ngFor="let item of myList index as i"
[ngValue]="i"
>
{{item.name}}
</option>
</select>
Function from Component file
selectedValue = -1; //works //Option in select is changed
eventChange(){
this.selectedValue= -1; //don't work
//Function is called,
//Value changes
//But selected Option in Select doesn't change
}
Comment:
On running web page(refresh) first value of select is set properly, if in component file I set variable selectedValue to other index the other value is selected, but it works only on run, but not in function)
Also I found this question Angularjs: select not updating when ng-model is updated
But here is an answer to AngularJS for using ng-options, instead of ng-repeat, in angular 4 I found only *ngFor...
Update:
Clarification just in case: function is being called, but I want change selected option through javascript. I try this by changing ngModel value, but even when ngModel value is cahnged, selected option doesn't change.
Use ngModelChange and you don't need [ngValue]
<select [(ngModel)]="selectedValue"
(ngModelChange)="eventChange()"

ng-options getting null value in the drop-down.I'm using for controllers?

I'm new to angular .I'm passing ng-model for selected option in the drop-down.
My code is
<label>Tables</label><select ng-options="option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
In this I'm I changed table options the option is not showing as selected in the DOM.
we have updated your question. But I have post it as an answer with some changes
like option.display is wrong, that should be like below .
<label>Tables</label><select ng-options="option as option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
But if you post your controller code and JSON data , then it could be better to avoid guess answers
#ramesh rajendran thanks for your answer...
Actually my issue with code confirmation in the jsp file.I'm using more than one controller in my application so the the scope value is getting null for me.Later I've rectified my issue is.
Your ng-options syntax is wrong.
It's like ng-options="value as text for option in Options"
so you have to pass variables accordingly
In your case, if you want to get option.display as value your tag would be
<label>Tables</label>
<select ng-options="option.display as option.display for option in
tableviewOptions" ng-model="selectedOption" ng-change="getView
(selectedOption)></select>
you can remove the space by adding this code
select:option:empty
{
display:none
}

Angular 2 selectBox value

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.

AngularJS select ng-model value not in scope

I am using plain options for select tag as i have to display few options only when they satisfy a condition. I need the value of the selected dropdown in controller to perform other opeartions, but the problem is i dont get the value in scope.`
<select id="selectView" ng-model="selectedView" ng-init="selectedView='plain'" ng-change=resultViewChanged()>
<option value="plain" >Plain</option>
<option value="grid" ng-if="user.gridView" >Grid</option>
<option value="box" ng-if="user.boxView">Box</option>
</select>`
For now, in the controller i am just trying to get the value of selectedView. I am changing dropdown to grid and I tried below two alert's and both does not give the value grid in the alert box. How to get the value of the selected option in controller?
$scope.resultViewChanged = function() {
alert($scope.selectedView.value); //Tried this undefined
alert($scope.selectedView);
}
Appreciate your help
The selected value should be store in the $scope.selectedView (without the .value after) variable as it is defined in the ng-model.
So , this:
alert($scope.selectedView);
should alert the selected value in the dropdown.
how 'bout this?
alert(document.getElementById('selectView').value);

iterated item overriding my model with ngOptions

I have this
<select id="categoryListBox"
data-ng-model="list"
data-ng-change="updateCategory(item)"
data-ng-options="item as item.categoryId[0].name+' : '+item.name for item in list"
class='form-control' >
<option value="" style="display:none;"> current category </option>
</select>
And whenever updateCategory is hit, I console.log the parameter, which should be the item I select. The console.log reads it as undefined.
I also console.log the model, $scope.list, and it logs as being replaced by the item that I select.
What's going on?
Here's the updateCategory function
$scope.updateCategory = function(item){
console.log('updateCategory hit');
console.log('list is now',$scope.list)
console.log(item);
};
This comes out as
updateCategory hit
list is now [what item should be]
undefined
The html is wrapped inside of an ng-hide, if that matters
Your ng-change is in a different scope than your ng-options. Theoretically, you basically just need to pass in the model, since it will be updated before the ng-change:
updateCategory(list)
But as you see, because it is your model and your ng-options, you then override the list. So what you need to do, is have your model be something else:
<select id="categoryListBox"
data-ng-model="selected_item"
data-ng-change="updateCategory(selected_item)"
>
So - to recap, the model will be set to whatever the selected item is. If you set the model to be the same thing as the list, the list will become whatever the selected item is when you select. Probably not what you want. So set your model to a different variable than your list, and then you can pass in the model to your ng-change function.

Categories