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>
Related
I need disabled one input text when to select is "Product" with Angular 1
SELECT
<md-select ng-model="item.CostingType"
name="unit"
ng-change="loadVarsFromProductType(item.CostingType)">
<md-option ng-repeat="c in costingTypeAvaliable"
ng-value="c"
required
ng-selected="c.Id === item.CostingType.Id">
{{c.Description}}
</md-option>
</md-select>
INPUT
<md-input-container flex class="md-icon-float md-icon-left md-block" style="margin-bottom:0px">
<md-icon md-font-icon="material-icon"
ng-class="font.theme">attach_money</md-icon>
<input ng-model="item.CostGross"
placeholder="Custo s/ impostos"
id="CostGross"
min="0"
mdInput
ng-value="item.CostGross"
ng-hide="item.CostingType == 'Product'"
type="number" />
Already tried with ng-disabled="item.CostingType == 'Product'"
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
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-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.