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.
Related
I'm trying to build a dropdown menu with checkboxes that show/hide certain elements when cheked/unchecked using AngularJS Material.
Normally I'd use md-checkbox and a combintion of ng-model on the checkbox and ng-show on the element to be shown or hidden, but I'm trying to do it with the Select Header, as seen on the AngularJS Material website, and it doesn't work.
Here's the code:
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
<md-option ng-value="filter-2" ng-model="showOther">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv || notice.status.visibility">
This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
This is more content.
</div>
Any solutions that don't envolve using javascript are most welcome!
Your option must be a single model,
Do it this way
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option name="filter" ng-value="filter-1" ng-model="showDiv">Attribute</md-option>
<md-option name="filter" ng-value="filter-2" ng-model="showDiv">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv == 'filter-1' || notice.status.visibility">
This is some content.
</div>
<div ng-show="showDiv == 'filter-2' || notice.status.visibility">
This is more content.
</div>
Although it isn't a very elegant solution, I managed to make this work using ng-click, as seen below:
<md-select ng-model="filters" multiple>
<md-select-header>
<input placeholder="" class="md-text">
</md-select-header>
<md-optgroup>
<md-option ng-value="filter-1" ng-click="showDiv = ! showDiv">Attribute</md-option>
<md-option ng-value="filter-2" ng-click="showOther = ! showOther">Another Attibute</md-option>
</md-optgroup>
</md-select>
<div ng-show="showDiv || notice.status.visibility">
This is some content.
</div>
<div ng-show="showOther || notice.status.visibility">
This is more content.
</div>
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>
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>