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.
Related
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()"
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
Following is my code extract
<select
ng-init="joinedStatus=0"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-selected="joinedStatus==joinstat.id"
ng-model="joinedStatus">
<option>{{joinedStatus}}</option>
</select>
But still there is no default option selected.
joined is defined as:
$scope.joined=[{id:0,name:'No'},{id:8,name:'Yes'}];
You should not provide <option> inside select since ng-options will add the options from specified array.
ng-selected is of no use. Remove it too.
So, this will work
<select ng-init="joinedStatus=joined[0]"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-model="joinedStatus">
</select>
Since we have initialized the model with 0th array element. You will see this selected in the select.
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.
I am trying to hardcode in an option to an ng-options select list when the scope it is pulling from has no answers. I was able to achieve this in another scenario by doing something like that:
ng-show="!$scope.length"
However, it does not seem to be working inside the select list itself. Perhaps it's something with how Angular does ng-options? Here is my attempt:
<select ng-model="myModel" ng-options="option.title for option in optionsList">
<option ng-show="!optionsList.length">There are no prompts for this lesson.</option>
</select>
I have hardcoded an option inside of the select with the same logic, but it does not seem to want to work. Thanks in advance!
One way to do this would be to create a filter that inserts the default option if empty...
.filter('defaultOptionIfEmpty', function () {
return function (items, defaultItem) {
return items.length ? items : [defaultItem];
}
});
Use it like this...
<select ng-model="foo" ng-options="item.value for item in items | defaultOptionIfEmpty : {id: 0, value: 'There are no prompts for this lesson.'}">
</select>
Fiddle
Assuming that your data for options is "dataBlocksHere.currentData.selections", you need to pre-process this block to check if there is anything in it, and insert the appropriate content into it.
So before you assign the item to scope, process the results in your javascript.
if(!dataBlocksHere.currentData.selections){
// insert item into selections, something like
dataBlocksHere.currentData.selections['data'] = {id: 0, data: "There are no prompts for this lesson."};
}