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.
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>
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
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-select not working in my code. I imported every css and js files needed for angular so dont say to import files properly. I'm building a web application. I'm almost done with that but on client side validation <md-select> not working.
<md-input-container class="md-block" style="margin-bottom: 0px;padding:2px;">
<md-select name="gender" ng-model="gender" ng-required="true" >
<label value="gender" style="padding-left: 13px">Gender</label>
<md-option value="male">Male</md-option>
<md-option value="female">Female</md-option>
<md-option value="others">Others</md-option>
</select>
<div class="errors" ng-messages="form.gender.$error">
<div ng-message="required">Please Select Your Gender</div>
</div>
</md-input-container>
It should work fine but for me it's not working it shows error but redirects to next page. So please someone solve my issue.
<body ng-controller="myCtrl">
<md-select name="gender" ng-model="gender" ng-required="true">
<label value="gender" style="padding-left: 13px">Gender</label>
<md-option value="male">Male</md-option>
<md-option value="female">Female</md-option>
<md-option value="others">Others</md-option>
</md-select>
<div class="errors" ng-messages="form.gender.$error">
<div ng-message="required">Please Select Your Gender</div>
</div>
</body>
DEMO
md-select not validating anymore so use select in the md-input-container. i solved this issue by following the github angular issue page.
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