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
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 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.
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
I am using angularjs and angular material to design my web page. I am unable to show the values of option present in an array.
My index.html
<md-input-container class="md-block" flex-gt-sm>
<label>Level</label>
{{levels|json}}
<ul>
<li ng-repeat="level in levels"> {{level.name}}</li><!--this is working-->
</ul>
<md-select ng-model="news.level">
<md-option ng-repeat="level in levels"ng-value="level.name">
{{level.name}}
</md-option><!--this is not working-->
</md-select>
</md-input-container>
And in the controller I have
$scope.levels=['Level one', 'Level two','Level Three'];
Please help what could possibly be wrong and also let me know of any suggestion to this problem.
Here you go - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container class="md-block" flex-gt-sm>
<label>Level</label>
<ul>
<li ng-repeat="level in levels"> {{level.name}}</li>
</ul>
<md-select ng-model="news.level">
<md-option ng-repeat="level in levels" ng-value="level.name">
{{level.name}}
</md-option>
</md-select>
</md-input-container>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.levels = [{name:'Level one'}, {name:'Level two'}, {name:'Level Three'}];
});
This is my view code......
<md-select aria-label="..." ng-model="topping">
<md-option>Show All</md-option>
<md-option>Fit width</md-option>
<md-option>Full Size</md-option>
<div style="height: 100px;overflow-y: scroll; border-top: 1px solid #ccc">
<md-option>100%</md-option>
<md-option>75%</md-option>
<md-option>50%</md-option>
<md-option>33.33%</md-option>
<md-option>25%</md-option>
<md-option>12.5%</md-option>
<md-option>8.33%</md-option>
</div>
</md-select>
When I click on scroll bar the drop-down disappears and I am not able to select any option
I had the same problem, my <md-select> options weren't scrolling. When I put flex="20" into <md-input-container> it scrolled. Here's my full code:
<md-input-container flex="20">
<label ng-switch on="nativeLanguage" class="md-subhead">
<span ng-switch-when="en-US">Change to clip:</span>
<span ng-switch-when="es">Cambiar a acortar:</span>
<span ng-switch-when="zh">更改为剪辑:</span>
<span ng-switch-when="jp">クリップに変更:</span>
<span ng-switch-default>Change to clip:</span>
</label>
<md-select name="selectClip" ng-model="selectClipInMovieWatching">
<md-option ng-repeat="element in clipArray" ng-value="element">
Clip: {{element}}
</md-option>
</md-select>
</md-input-container>