Selecting last item in multiselect with angularjs and md-options - angularjs

I have the following code
<md-select multiple ng-model="filtered" placeholder="Select a team member" ng-show="onTeam">
<md-option ng-value="opt.value" ng-repeat="opt in allowedStatuses" selected="{{ opt.value === opt.last ? 'selected' : '' }}">{{ opt.title }}</md-option>
</md-select>
I would like the last option to always be selected. How to do this?

Answer was this...
<md-select multiple ng-model="filtered" placeholder="Select a team member" ng-show="onTeam">
<md-option ng-value="opt.value" ng-repeat="opt in allowedStatuses" ng-selected="{{ opt.title == 'Myself' }}">{{ opt.title }}</md-option>
</md-select>
Needed the ng-selected in there instead of selected...

Related

AngularJS Material dropdown options not working

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 not selected when the ng-value is an object

<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

How to customize displayed text in AngularJS Material Select Option Group?

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>

How to get select item from md-select angularjs

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

angularjs md-select big data

<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

Resources