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>
Related
I have this md-select :
<div ng-repeat="a in list">
......
<md-input-container class="md-block select-option-input" style="margin:0px" flex-gt-sm>
<md-select
name="tableNo" placeholder="Nr. masa"
ng-model="a.tableNo" ng-change="tableEdit(a)" class="md-block" flex-gt-sm>
<md-optgroup label="Nr. Masa" flex > <md-option
ng-value="tableNo" ng-repeat="tableNo in getNumber(me.settings.tableNo)" >{{tableNo}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
....
</div>
which work only once. If I open the dropdown for the first time works good but if I try to open again it doesn’t open.
*on localhost works good.
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>
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>
<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
I am using Angular Material and have a couple of select inputs on a form that I would like to separate with a piece of static text.
Both the selects are in md-input-containers and so the text that sits between the two needs to have the same padding around as so I have had to use a further input container to hold the static text like so:
<div layout="row" flex layout-padding>
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<md-input-container>
<label></label>
<input type="text" value="label" readonly>
</md-input-container>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Working fiddle
It feels a bit hacky, and I wondered if anyone had any better suggestions.
I dont want the text to have any border bottom on, I know I could just roll my own css, but I wondered if there was a way out of the box using the AM framework?
It is very simple. Just use span element with layout-align attribute on parent element.
Here is the code
<div layout="row" flex layout-padding layout-align="start center">
<md-input-container flex>
<label translate>Select 1</label>
<md-select ng-model="option1" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
<span flex>Label</span>
<md-input-container flex>
<label translate>Select 2</label>
<md-select ng-model="option2" flex>
<md-option ng-repeat="option in options">
</md-option>
</md-select>
</md-input-container>
</div>
Here is working Example. http://codepen.io/next1/pen/PzbXpv