This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
Related
I have seen few answers which were working for ng-repeat, but with ng-options I am facing issue.
Problem : Want to show the error message required if the dropdown is touched and nothing is selected, I am able to do this with input fields.
JS CODE
$scope.personMap = [{ name:"Abc", id:"a"},
{ name:"XYZ", id:"b"},
{ name:"FGH", id:"c"},
{ name:"TY", id:"d"}
}]
HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="" selected hidden/> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Referred this ng-repeat solution
As there is no answer yet, I am posting the issue i found out.
So when i use ng-options it starts adding one extra row in the dropdown which can be blank or you can give something like select me.
I added the below code to fix that and in chrome it does not show any blank row.
<option value="" selected hidden/> </select>
But when i try in IE it still have a blank row, So what happens is when I select one value in dropdown and then click back on the blank row the ngMessage works fine.So if i add one more blank option in chrome and then try to select something first and then click on blank the ngMessage work as expected.
Issue is
I was expecting <select> to work like the input fields and was trying to use the$touched` state. But it does not work like that, I was thinking as soon as i click on the dropdown ngMessage should get active if i leave the focus to other field without selecting anything from dropdown. Not sure if I can make it possible through any other way.
Updated HTML
<select name="inpName" ng-model="person.name" ng-options="i as i.name for i in personMap track by i.id" required>
<option value="">Select one </option> </select>
<div ng-messages="form.inpName.$error" ng-if="form.inpName.$touched">
<div ng-message="required">Required field</div>
</div>
</div>
Template:
<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
<option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}" value="site">{{site}}</option>
</select>
Controller:
$scope.siteChange = function(){
console.log(" $scope.siteVal--> "+ $scope.siteVal);
}
I could able to populate values in dropdown properly, but when I try to select value in dropdown I could see "$scope.siteVal--> undefined".
Even when I select the dropdown value multiple time ng-change is triggering only once.
Remove .value attribute from your html markup and your code would work fine!
<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
<option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}">{{site}}</option>
</select>
From the DOCS
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected option
Here is the plunker which demonstrates the same
When I update the model, a select box is not getting updated to the value in the model. The select has all the valid options, however, the value from the model is not being selected. In the code below, the value in the model is "FACEBOOK". The mapping to the model is correct because value from the select box saves correctly. The issue is occurring when I load the model on page display.
Here is the html:
<select
class="form-control"
required
ng-model="channel.channeltype"
ng-options="obj.name for obj in contactchannels track by obj.id">
</select>
The generated html is:
<select ng-options="obj.name for obj in contactchannels track by obj.id">
<option selected="?" value="selected"></option>
<option label="Facebook" value="FACEBOOK">Facebook</option>
<option label="Skype" value="SKYPE">Skype</option>
<option label="Instagram" value="INSTAGRAM">Instagram</option>
</select>
thanks in advance,
Use ng-selected instead of selected. You can make it true and false.
And also show how you are doing in JS file with scope.
If it doesn't work like this, then give ng-change="some_func()" and define that function in JS, $scope.some_func = function() {}
Hi I am new to angular js.
I want to know how to disable drop down when checkbox is unchecked in angular js.this is the code i have been trying...
Click me:
<input type="checkbox" ng-model="checked"><br/>
<div>
<div class="check-element animate-hide" ng-show="checked">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
By having checked defined as your checkbox's model you can just that to control whether the select (drop down) is disabled using that variable on your controller's scope.
<select ng-model="myDropDown" ng-disabled="!checked">
make sure you use the negation of checked since you want it to be disabled when the checkbox is not checked.
PLNKR example
You can do:
<select ng-model="myDropDown" ng-disabled="!checked">
Use ng-disabled conditionally on if the ng-model for your checkbox is true or false
So, this is a real quick example. Below I have a select box. You can use ng-disabled="EXPRESSION" to dynamically disable stuff.
<select ng-model="dropdown" ng-options="item.name for item in dropdown" ng-disabled="!checked">
<input type="checkbox" ng-model="checked">
Just set the expression to check the variable that is true/false on your checkbox. When it is false (unchecked) your dropdown will be disabled
I have an issue in dynamically creating select dropdown in angular js, changing one dropdown option make changes on the rest of the dropdowns. My requirement is to use same data option in all dropdown and to get the selected option in each dropdown. How do I over come this problem?
example:
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option'
ng- change="optsChanged()"required ng-options='option.value as option.name for option
in useroptions'>
</select>
<div>
I need to create a dropdown for each row of a table that has the same options, but it should be a different instance or different model to be assigned dynamically.
use the index as the subscript for the ng-model ng-model='newcategory.option[$index]'.. currently you are using the same ng-model for all the select boxes which is causing the issue
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option[$index]'
ng-change="optsChanged()"required ng-options='option.value as option.name for option in useroptions'>
</select>
<div>