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()"
Related
I have a dropdown value which is proving very difficult to set in the console. I have tried using Jquery .val and using document.getEWlementById.value and both will not set the item. Does anyone know how I can set the value of the dropdown using the value? I think the problem is that it is using Knockout which makes it more difficult to set it dynamically.
Here is the HTML:
<select id="sourceShippingLocations" data-bind="options: $root.ShippingLocations, optionsText:'Name', optionsCaption:'Select location', value: $root.SelectedOriginShippingLocation" class="form-control" title="">
<option value="">Select location</option>
<option value="">doo Warehouse</option>
<option value="">moo</option>
<option value="">Manchester</option>
</select>
Knockout doesn't make it "more difficult to set dynamically". It just works differently.
In knockout, a viewmodel dictates what happens in the view. In other words: you don't set the value of the select through modifying the attribute directly, but you change the selected value of the underlying model and knockout manages the UI state for you.
Each of the <option> elements represents a value in an array named $root.ShippingLocations. The selected value is stored in $root.SelectedOriginShippingLocation.
In the viewmodel, you'd update the current selection by doing something like:
this.SelectedOriginShippingLocation(this.ShippingLocations()[0])
(this sets the selection to the first shipping location)
If you want to see this in action without having to modify the viewmodel, you can hack this in your console:
var root = ko.contextFor(document.getElementById("sourceShippingLocations")).$root;
root.SelectedOriginShippingLocation(ko.unwrap(root.ShippingLocations)[0]);
// change 0 for the index you like
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 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
Using Angular Chosen
https://github.com/localytics/angular-chosen
and testing out the following example
<select multiple
chosen
ng-model="state"
ng-options="s.name for s in states">
<option value=""></option>
</select>
However, I'm wondering as to how one would bind just the name value for a state object to ng-model?
The options presented will display just the state names, but when chosen, the entire state object is bound to ng-model rather than just the selected name.
Any thoughts would be much appreictaed as always!
You can try this format
select as label for value in array
eg. s.name as s.name for s in states
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);