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
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>
The html is build with the layout directive (layout="row") and contains an icon and 3 select boxes. My select boxs and icon is NOT aligned - how can I alignment these horizontally ?
My code
<div layout="row" layout-align="start center" class="filter">
<div flex="15">
<i class="material-icons md-24">filter_list</i>Filter
</div>
<div>
<md-select ng-model="$ctrl.selectedtype1" placeholder="type1" class="md-no-underline">
<md-option ng-repeat="type in $ctrl.type1List" ng-value="type">
{{type.value}} ({{type.id}})
</md-option>
</md-select>
</div>
<div>
<md-select ng-model="$ctrl.selectedtype2" placeholder="type2" class="md-no-underline">
<md-option ng-repeat="type in $ctrl.type2List" ng-value="type">
{{type.value}} ({{type.id}})
</md-option>
</md-select>
</div>
<div>
<md-select ng-model="$ctrl.selectedtype3" placeholder="type3" class="md-no-underline">
<md-option ng-repeat="type in $ctrl.type3List" ng-value="type">
{{type.value}} ({{type.id}})
</md-option>
</md-select>
</div>
</div>
...looks like this:
https://plnkr.co/edit/I8Jn4JweN0OVGBzBAwS8?p=preview
material-design-iconic-font css provides many icons. Try this plunkr:
You can actually use md-icon tag provided by angular material.
Following are the related links:
1.https://material.angularjs.org/latest/api/directive/mdIcon
2.https://material.angularjs.org/latest/demo/icon
Filter should be added in between md-icon close and open tags in a span
<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