I have a drop-down to render some values with API. The values are rendering fine in the dropdown options. But, when I chose any option the value is not retained in the UI.
Here is my html:
<md-input-container md-no-float layout-fill style="text-align: start; margin-bottom: 25px !important;">
<md-select ng-model="data_selected" placeholder="I want to speak..." required>
<md-option ng-repeat="lan in language_country" ng-value="{{lan}}"> {{lan.name}}
</md-option>
</md-select>
</md-input-container>
Do I need to other things or did I misplaced any?
This problem occurs with ng-value. Try using value instead of ng-value and your problem will be solved.
<md-select ng-model="data_selected" placeholder="I want to speak..." required>
<md-option ng-repeat="lan in language_country" value="{{lan}}">
{{lan.name}}
</md-option>
</md-select>
Hope this helps!
Change to ng-options directive will solve your problem.
ng-options
<md-input-container md-no-float layout-fill style="text-align: start; margin-bottom: 25px !important;">
<md-select ng-model="data_selected" placeholder="I want to speak..." required
ng-options="lan.id as lan.name for lan in language_country">
</md-select>
</md-input-container>
Normal md-option used when you need to bind custom option to select or binding custom options.
<md-select ng-model="data_selected" placeholder="I want to speak..." required>
<md-option value="">Select Language</md-option>
<md-option ng-repeat="lan in language_country" value="{{lan}}">
{{lan.name}}
</md-option>
</md-select>
Related
I'm trying to build a form using AngularJS Material and am having problems getting my dropdown options to show up. My HTML is below and my options are stored in an object array on my server script. What am I doing wrong below?
<md-input-container class="md-block" flex-gt-sm ng-switch-when="choice">
<label for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" value={{element.q_value}}>
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm ng-switch-when="choice">
<label for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" ng-model="selectedItem">
<md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}">
{{option.element_choice_label}}
</md-option>
</md-select>
<md-select name='services' ng-model="vm.service.service_group" placeholder="Select a Group" required>
<md-option ng-value="opt" ng-repeat="opt in vm.service_group" ng-selected="true" >{{ opt.name }}</md-option>
</md-select>
I have this select option in my form.This will not get selected on edit the object.How can make the ng-model to be selected on edit?
Thanks
Finally, I got to resolve it.I added ng-selected="opt.code==vm.service.service_group.code" to check the selected values.
<md-select name='services' ng-model="vm.service.service_group" placeholder="Select a Group" required>
<md-option ng-value="opt" ng-repeat="opt in vm.service_group" ng-selected="opt.code==vm.service.service_group.code" >{{ opt.name }}</md-option>
</md-select>
Hope this will help some one
I have here a snippet
<span class="filter-lbl">Filter by:</span>
<md-input-container>
<md-select md-container-class="filter-contribution-cont" ng-model="selected" ng-change="selectedChanged(); updateSelectedContribution();" multiple>
<md-optgroup>
<md-option ng-value="data.label" ng-click="dropdownClick(data)" ng-selected="data.selected" ng-repeat="data in dataSet | unique: 'label'">{{data.label}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
For example I have a function that I made to construct the text that I want to be displayed named getSelectedContributions(), how do I replace the built-in displayed text made by AngularJS Material?
I'm still very new to AngularJS so if possible I need a simple solution. Thanks!
Found the answer. I just needed to add md-selected-text="getSelectedContributions()" in md-select like this
<span class="filter-lbl">Filter by:</span>
<md-input-container>
<md-select md-selected-text="getSelectedContributions()" md-container-class="filter-contribution-cont" ng-model="selected" ng-change="selectedChanged(); updateSelectedContribution();" multiple>
<md-optgroup>
<md-option ng-value="data.label" ng-click="dropdownClick(data)" ng-selected="data.selected" ng-repeat="data in dataSet | unique: 'label'">{{data.label}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
This is my code to fill select list.
<md-option ng-value="brand.name" ng-repeat="brand in brands">{{ brand.name }}</md-option>
</md-select>
I want the brand user select should be available in scope variable selectedBrand
But it giving me undefined.
What is wrong with above code?
<div layout="row">
<md-select class="inline-flex md-select-down" placeholder="Select" ng-model="selectedBrand">
<md-option ng-repeat="item in brands" value="{{item.name}}">
{{item.name}}
</md-option>
</md-select>
</div>
DEMO
<md-input-container>
<md-select ng-model="someModel" placeholder="Select a user">
<md-option ng-value="user.id" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>
</md-input-container>
If the users array has a big size, this works fine with Chrome but causes bad performance with ie11.
Why is that and what are the possible solutions.
You can handle by using limitTo and orderby filters,
<md-select ng-model="someModel" placeholder="Select a user">
<md-option ng-value="user.id" ng-repeat="user in users |limitTo:10">{{user.name}}</md-option>
</md-select>
DEMO