I'm currently having a problem with selecting drop downs which are not working correctly with angularjs. Couldn't find anything that relates to my problem. It seems odd.
I am a newbie to angularjs so please forgive my ignorance
I am currently trying to retrofit angularjs onto my MVC5 application.
Here are the issues;
When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option
Once you change the selected option on the drop-down, selected the object in scope is now empty?
Here is the code
The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:
ng-options="o.text for o in options"
You should change your
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
to
<select ng-model="selected" ng-options="o as o.text for o in options"></select>
to make it work as you expected.
because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.
<div>
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
<br />Code: {{ selected.code }}
<br />Text: {{ selected.text }}
</div>
Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".
Related
I got some problems with selectbox.
In my original code, I receive an object through $http calling, and that is like below.
[
{key:'user_id', value:'ID'},
{key:'user_name', value:'Name'},
{key:'user_gender', value:'Gender'},
{key:'user_phone', value:'Phone'},
{key:'user_email', value:'Email'},
{key:'user_birth', value:'Birthday'},
];
When I tried to put values of this object into option, it made 'blank option' automatically.
To solve this, I saw two posts
Angular JS Remove Blank option from Select Option
Why does AngularJS include an empty option in select?
but any solutions of these could not help me.
How can I fix this?
Here's my fiddle.
Select box create blank option
I'll wait some handsome or pretty developers who will solve my problem. :)
Try This
HTML Code -
<select ng-options="opt as opt.value for opt in searchOpt.option" ng-model="searchOpt.selected">
</select>
The ngOptions attribute can be used to dynamically generate a list of elements for the element using the array or object obtained by evaluating the ngOptions comprehension expression
Working Jsfiddle
<select ng-model="itemSelected">
<option
ng-repeat="item in data" value="{{ item.key }}"
ng-selected="{{item.key === itemSelected}}">
{{ item.value }}
</option>
</select>
https://plnkr.co/edit/QthDhkvku8UvcVHaWcGG?p=preview
Check the code. Use ng-selected in your option for selected first element.
I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown
Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.
I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller
Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.
You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions
I am using one $scope.sample variable to receive ng-model from two input fields. It is working fine. I do this: ng-model="sample.first" and ng-model="sample.second".
Then, I tried to remove the first input and use a dropdownlist instead. The dropdownlist is filled by a different variable $scope.list using the ng-model="list". The dropdownlist is filled correctly. However, I need to put the selected item in the dropdownlist to the $scope variable sample.first. This is not working. How can I do this?
Thank you,
Rafael
In Angular to do a select element, you would use this syntax:
<select ng-model="sample.first" ng-options="item.property for item in list"></select>
Where "item" is simply an object in your $scope.list array. The select should be properly filled and when an item is selected, it will set that item as your ng-model value, "sample.first".
I got it to work with :
##### <select ng-model="sample.first">
<option ng-repeat="list in lists" value="{{list.name}}">{{list.name}}</option>
</select> #### Using $scope.lists= [{name: "Joe"}] on the controller.
I use as-sytax(like ng-options="p.id as p.name for p in options") for select options.
The problem is, I need access to p too. For example, to display additional label near input or button or even change inputs.
So, I can't do it, since I need to set just id. It could be a solution to use another variable and set id using $watch. But I have selected id and it will be a mess to sync all this things...
Is there solutions for similar problems?
Plnkr: http://plnkr.co/edit/7LStlQnkVGBjwsI3d9NO?p=preview
this is what you need
model will be the ID:
<div ng-init="init();">
<select ng-model="model" ng-options="o.id as o.label for o in options"></select>
<span>Your data is: {{model}}</span>
</div>
model will be complex data object:
<div ng-init="init();">
<select ng-model="model" ng-options="o as o.label for o in options"></select>
<span>Your data is: {{model.data}}</span>
</div>