I am new to Angular, I have the following code:
<select id="selectUser" class="form-control" ng-change="selectAction()" ng-model="users"
ng-options="value.SignOnId as value.UserName for value in users">
<option value="">Select a User</option>
</select>
As soon as I select a value from the drop down, it executes the selectAction() method and then all values from the drop down disappear, can anybody tell me what's the reason?
change this: ng-model="users" to ng-model="user"
When you select the user, you are setting the users variable to be the selected user, which means your ng-options no-longer has options in it.
Related
so I have two dependent select, one for states and the other for cities. It works fine but I can't get the value picked in the first select. I tried everything, the only result I got was the list of all the cities. What I need is which state picked.
My code:
<label>States</label>
<select id="provincia" class="form-control" ng-model="ciudades" ng-options="provincia for (provincia, ciudades) in provincias">
<option value=''>Elegir</option>
</select>
<label>Cities</label>
<select id="ciudad" class="form-control" ng-disabled="!ciudades" ng-model="modelciudad" ng-options="ciudad for ciudad in ciudades" required>
<option value=''>Elegir</option>
</select>
My list is something like this:
$scope.provincias = {Florida:['Miami', 'Orlando']}
I try using ng-model on Option tag but with no result.
Thanks
I am having a JSON reponse data which is an array representing country code and description
{"codeDescList":[{"desc":"Aruba"}],"codeValueCode":"ABW"},
{"codeDescList":[{"desc":"Afghanistan"}],"codeValueCode":"AFG"},
{"codeDescList":[{"desc":"Angola"}],"codeValueCode":"AGO"},
{"codeDescList":[{"desc":"Anguilla"}],"codeValueCode":"AIA"},
{"codeDescList":[{"desc":"Åland Islands"}],"codeValueCode":"ALA"},
{"codeDescList":[{"desc":"Albania"}],"codeValueCode":"ALB"}
I stored the above array in angularJS scope object as follows
$scope.codeValueData = response.data;
I created select box for countries
<div class="form-group">
<select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">
</select>
</div>
The select box is created correctly like below
<option value="ABW">Aruba</option>
<option value="AFG">Afghanistan</option>
<option value="AGO">Angola</option>
<option value="AIA">Anguilla</option>
<option value="ALA">Åland Islands</option>
<option value="ALB">Albania</option>
The problem with my code is if profileBizObj.preferredAddress.countryCode is referring to the value "AGO" the select box is not showing the the country "Angola". The select box is showing blank.
I am new to angularJS. Please help to resolve this issue. Thank you
What you try to do can be achieved more easily with an ng-repeat. Try this:
<select ng-model="profileBizObj.preferredAddress.countryCode">
<option ng-repeat="item in codeValueData" value="{{item.codeValueCode}}">
{{item.codeDescList[0].desc}}
</option>
</select>
Here is a working fiddle: http://jsfiddle.net/5s0b0jnz/
Writing below select statement worked for me
<select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData">
The select box is populated as
<option value="0">Aruba</option>
<option value="1">Afghanistan</option>
<option value="2">Angola</option>
<option value="3">Anguilla</option>
<option value="4">Åland Islands</option>
<option value="5">Albania</option>
and Selectiong Angola is storing as "AGO" in the model "profileBizObj.preferredAddress.countryCode" which exactly I needed.
Thank You all for the help
Your ng-options is ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">, it means, use the codeValue will be bound to model , and the ...desc as the displayed value. So when your model value is AGO, it can not be referred to some object in codeValueData.
You should set your option value like AGO with this:
ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">
Then the codeValueCode will be applied to your model. And in reverse, for some model value like AGO, the related option will be selected.
I have this code (there is $index because select's are inside ng repeater, I have more than one dynimally generated)
<select name="udaljenosti_{{$index}}" ng-model="attribute.Choices.Id" class="form-control" required>
<option value="" >--Choose--</option>
<option ng-repeat="choice in attribute.Choices" value="{{choice.Id}}" ng-selected="choice.IsSelected==true">
{{choice.Name}} </option>
</select>
There is IsSelected property on choice as you can see. If all choices have IsSelected==false, on submit I get error that some option is required because of required property on select, and when I choose some option on select and hit submit there is no error. Very good, so far. But, when some option is prepopulated from the database there is some strange behaviour. Everything seems good but when I click submit angular says there is error on select field. It says select is required but some option is already selected!!
EDIT: it seems name ang ng-model should much. How to accomplish this because I get error if I put uudaljenosti_{{$index}} inside ng-model?
<select ng-model="Event.Team" ng-options="a.TeamName for a in Event.Item.TeamNamesList" required="">
<option value="" disabled="" class="">-- Select Your Team --</option>
<option value="0">Team1</option>
<option value="1">Team2</option>
<option value="2">Team3</option></select>
How can I auto select the already saved value on db ?
Here I saved the "Team1" as on DB(string field). This drop down does not have any "value filed" associated with it.Only text fields as Team1,Team2,...
EDIT : On above set-up where I can save the data properly.But the problem I have is when it shows that data again on drop down box.Any help would be much appreciated.
For data like [{"Selected":false,"Text":"Yugoslavia","Value":"244"},{"Selected":false,"Text":"Zambia","Value":"246"},{"Selected":false,"Text":"Zimbabwe","Value":"247"}]
this is what works
<select
ng-model="paymentDetails.BeneficiaryCountry"
ng-options="country.Value as country.Text for country in paymentDetails.BeneficiaryCountryList">
<option value=""></option>
</select>
try this
select ng-model="Event.Team" ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList" required="">
you can refer below jsfiddle
http://jsfiddle.net/n9rQr/20/
You need to specify which value will be used via the ng-options attribute.
The following should work ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList".
EDIT:
This way the directive will know which value to select based on the ng-model.
Here is fully working example, the trick is to use track by in select ng-options like so:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
If selectedCity is defined on angular scope, and it has id property with the same value as any id of any city on the cities list, it'll be auto selected on load.
Here is Plunker for this:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
See source documentation for more details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
I am trying to choose the leader of a team using 'select' ng-options feature.
Student object:
student{
name:String,
status : String
}
My code to select team leader is as below.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
<option value="class.team.leader">{{class.team.leader.name}}</option>
</select>
The 'select' is storing the values correctly into the appropriate model values. But, the select is not displaying the model value properly when I go to the page view. But this code is fine for saving the details.
Requirement:
if there is no value for the model, then option value="" ==> 'Select leader' is displayed by default. if else, it should display the 'class.team.student.name'
Some one please let me know where I went wrong.
Thanks.
HTML:
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option ng-show="!weHaveALeader" value="">Select leader</option>
<option ng-show="weHaveALeader" value="class.team.leader">{{class.team.leader.name}}</option>
</select>
JS:
$scope.weHaveALeader = false;
$scope.$watch('class.team.leader', function(new, old) {
$scope.weHaveALeader = true
}
You could remove the second option tag, that seems unneccessary.
I've put your code into a plunker http://plnkr.co/edit/OZCal9ZkCQeqnQJY0WP9?p=preview and it seems to work fine.
<select ng-model="class.team.leader" ng-options="student._id as student.name for student in curTeam.students">
<option value="">Select leader</option>
</select>
<div><b>Team Leader:</b> {{class.team.leader}}</div>
If that isn't what you want, please give more detail of what are missing.
The correct method to use select ng-model is as below.
Select leader
{{class.team.leader.name}}
This has solved the issue of displaying on the page reload.