I have following code.
<select id="block-rule"
class="form-control"
name="rule"
ng-model="forms.block.fields.rule">
<option ng-repeat="(key, value) in rules" value="{{key}}">{{value}}</option>
</select>
I'm not really familiar with AngularJS, but I can see, that it should iterate "rules" (as specified in ng-repeat), and it works right.
Thing that don't work - default value is not selected. As I can see, value that should be selected initially is need to be passed to ng-model.
forms.block.fields.rule, I think, contains a value, but I need to get a key.
Unfortunately, it's the only part of code I can show.
<select ng-options="key as value for (key,value) in rules" ng-model="forms.block.fields.rule">
DEMO FIDDLE
You can use ng-options but it may require you to change your rule model slightly (add a name property):
<select id="block-rule"
class="form-control"
name="rule"
ng- model="forms.block.fields.rule"
ng-options="rule as rule.name for rule in rules"
>
</select>
Related
How can you sort the options in a {select} like this:
<select ng-options="value as name for (value,name) in vm.options" ng-model="vm.selected">
when vm.options is an object (I want to sort by values)?
Context: At some point I needed to add an explicit empty option "" as a valid value. I'd love it to be the first one on the list, but due to how objects work in Javascript I can't get it to cooperate.
You can achieve in the following way
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected"></select>
and if you want to add empty option like 'Select' then
<select ng-options="option.value as option.name for option in vm.options | orderBy:'value'" ng-model="vm.selected">
<option value="" selected>Select</option>
</select>
Please also refer following link
'orderBy' in AngularJs
I want to display by default a value from a json which is something like
[{"city":"SURAT"},{"city":"BARODA"},{"city":"AHMEDABAD"},{"city":"MUMBAI"}]
this is came from server. I am store this value in $scope.user_all_city and there is one city is provided to user which is i am stored in this
$scope.user_city = "surat";
now my select tag is something like this
<select ng-model="model.user_all_city" ng-options="rm.city for rm in user_all_city" ng-init="model.user_all_city=user_city">
it is display first value as a blank. it is return to me default city when i am print {{mode.user_all_city}} but it is didn't display as selected option in it.
please help me over here and how to call a function in when i am change the value.
Try using ng-repeat instead of ng-options basically the ng-options is not that much descriptive in angularjs.
<select ng-model="cityName" required>
<option>Select city</option>
<option ng-selected="cityName==city" value="{{city}}" ng-repeat="city in cityList"></option>
</select>
here the required attribute will enusre that select city is highlighted in case of null value. and ng-selected will check if that expression is true and the only that object is selected.The value inseide the model=cityName play the role of selected value here.
I have a drop down select menu and i want to store the selected value in the controller.i.e If office1 is selected then Office! is selected in the scope and so.
I am unable to store the value in the controller as I am new to angularjs.Can somebody Help
Heres my dropdown code
<div class="col-xs-12">
<h5>Select the System:</h5>
<select id="repeatSystem" ng-model="selectedSystem" style="width: 100%">
<option ng-repeat="(key,value) in systems" value="{{key}}">{{key}}</option>
</select>
<select id="repeatOffice" ng-model="selectedState" style="width: 100%">
<option ng-repeat="system in systems[selectedSystem]" value="state">{{system}}</option>
</select>
</div>
here is the plunker link
http://plnkr.co/edit/nNsM4VMVeHXS2hDIsAAd?p=preview
Because you are binding select dropdown with ng-model then you can simply access these value in your controller.
This will give you first dropdown selected value
$scope.selectedSystem //same in view {{selectedSystem}}
This is for second
$scope.selectedState //same in view {{selectedState}}
DEMO select value and check.
Updates
I have updated this following line, where you had hardcoded value="state" to i changed it to value="{{state}}":
<option ng-repeat="state in result[selectedArea]" value="{{state}}">{{state}}</option>
See Updated DEMO
I'm a bit confused about how to answer the question. The value of the drop-downs in the controller will be bound to the variables:
$scope.selectedArea and $scope.selectedState depending on what values are selected in the view. The value attribute that you're setting is overriding it however.
I've updated your plunkr here:
http://plnkr.co/edit/F2KqqtWKvPndv7y6un1F?p=preview
I've also demonstrated setting initial values in your dropdowns that will remove that annoying "blank" option.
You can get the answer from this link http://forum.ionicframework.com/t/get-selected-value-from-a-select/20241
I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.
<select ng-model='signup.user["country_code"]'>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.
<select>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
Here is a snippet from my controller however I doubt it's that useful for solving this issue.
signup.user = {};
countryCodes.success(function(data) {
signup.country = data;
});
So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:
signup.user = {country_code: 840};
HTML:
<select ng-model="signup.user.country_code"
ng-options="country['country-code'] as country.name for country in signup.country">
</select>
I'm trying to figure out how (if possible, which I'm sure I can) to use a different value to that selected in a drop down box in HTML. Happy to use jQuery or JavaScript. So for example I have a series of dropdowns as follows:
<select id="country" title="Country">
<option>Argentina ARG</option>
<option>Australia AUS</option>
<option>Austria AUT</option>
<option>Austria AUT</option>
<option>Belgium BEL</option>
<option>Brazil BRA</option>
<option>Canada CAN</option>
</select>
Naturally when a user chooses say 'Brazil' the option displays 'Brazil BRA'. However, I would like to instead use the value 'BRA' is it possible to do this? Am I just being dumb and it can be done in plain HTML?
<option value="BRA">Brazil BRA</option>
Side note: I believe IE6 needs that value or things get funky onsubmit.
Use the value attribute: http://www.w3schools.com/tags/att_option_value.asp
<select id="country" title="Country">
<option value="ARG">Argentina</option>
<option value="AUS">Australia</option>
</select>
You can use the options value-attribute. This way the text that is shown to the user is Argentina ARG, but the value that is posted with the form is just ARG.
<select id="country" title="Country">
<option value="ARG">Argentina ARG</option>
<option value="AUS">Australia AUS</option>
...
</select>