I want to have the opportunity to select from a dropdown list a value and to click on a link to get the next Value of the dropdown list. How could I update the selected Value from the dropdown list if I click on the link?
<select class="dropdown-select" name="mySelect" id="chapter" ng-options="option.Icnumber for option in selected"
ng-model="selected.Icnumber" ng-change="updateChapter(selected.Icnumber.Icnumber)">
</select>
<a ng-show="nextChapter" class="ng-hide" ng-click="updateChapterNext(selected.Icnumber.Icnumber)">Next Chapter</a>
Thanks!
Angular has a feature called two ways binding, what ever you have in $scope and use it in the template, when you update the value in the controller, it will automatically update the value in the template.
for your problem you use selected as the dropdown value.
so in your updateChapterNext function modify the value for selected
so
$scope.updateChapterNext = function(param){
// do your thing to call next chapter
// and assign the response or new value to selected
$scope.selected = newValueForSelected;
}
this will update the selected value on the dropdown
Related
I have a form where I select a value in drop-down and submit it but when I try to access that form the value in the drop-down still remains selected, I want to deselect it on every new launch.
You can use the following to set the value of the dropdown to what you want.
document.querySelector('#idOfDropdown').value = desired_value;
// desired_value is the 'value' property of the option you want selected.
If the default option is written as
<option value=''>--select--</option>
...then, use this:
document.querySelector('#idOfDropdown').value = '';
I'm assuming that this line will be best placed at the end of the function that gets called when you submit the Form.
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()"
while selecting a value through multi select in select2 value gets deleted from list and is shown in selected value . but if i clear value using
$("#mySel2").select2('data', null);
value gets cleared from selected option but it is not added back to dropdown list/original list of value.Though it works fine in case of single value selection.
Any pointer or direction will be of great help.
<select id="mySel2" multiple="multiple">
<option ng-repeat="option in options" value="{{option.id}}">{{option.name}}</option>
</select>
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);
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.