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>
Related
I created a webpage with Angularjs and Laravel. It's an event page.
In my admin-panel I can manage all events.
When I click at "Bearbeiten" a new window appears.
At the bottom I can add/remove different attractions. When I submit the form, I want save the new data in the database, but I don't know how I can get the data from the formula. I tried different thinks and yes I used google.
When I click at "Bearbeiten" following code will be executed:
<md-dialog-content style="padding: 20px;">
<div layout-gt-sm="row">
<md-input-container class="md-block"flex-gt-xs>
<label>Name (Bsp: Schützenfest, Kirmes, Sommerdom)</label>
<input value="{{ $data['event']->name }}" name="event_name">
</md-input-container>
<md-input-container class="md-block">
<label>Stadt (Bsp: Hannover, München, Köln)</label>
<input value="{{ $data['event']->city }}" name="event_city">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Straße</label>
<input value="{{$data['event']->street }}" name="event_street">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Postleitzahl</label>
<input value="{{ $data['event']->zip->id }}" name="event_zip">
</md-input-container>
<md-input-container class="md-block" style="margin: 0">
<label>Webseite</label>
<input value="{{ $data['event']->website }}" name="event_website">
</md-input-container>
</div>
<div layout-gt-sm="row">
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Start (YYYY-MM-DD)</label>
<input value="{{$data['event']->start }}" name="event_start">
</md-input-container>
<md-input-container class="md-block" style="margin: 0" flex-gt-xs>
<label>Letzter Spieltag (YYYY-MM-DD)</label>
<input value="{{$data['event']->end }}" name="event_end">
</md-input-container>
</div>
<md-chips ng-model="mdDialogData[0]" name="event_attractions" readonly="false"
md-removable="true" md-max-chips="100" placeholder="Attraktionen">
<md-autocomplete
md-selected-item="mdDialogData[1].selectedItem"
md-search-text="mdDialogData[1].searchText"
md-items="item in mdDialogData[1].querySearch(mdDialogData[1].searchText)"
md-item-text="item"
placeholder="Attraktion suchen">
<span md-highlight-text="mdDialogData[1].searchText" style="width: 280px;">#{{ item }}</span>
</md-autocomplete>
<md-chip-template>
<strong style="margin-right: 15px;">#{{$chip}}</strong>
</md-chip-template>
</md-chips>
</md-dialog-content>
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="answer([#{{ mdDialogData[0] }}, '1', '2'])">
Änderungen speichern
</md-button>
<md-button ng-click="answer('useful')">
Abbrechen
</md-button>
</md-dialog-actions>
I am not really good with angular. Maybe are here some experts!
Since the data is already populating on the popup, I will assume you have correctly passed the data array to the function/module responsible for the popup.
Now, all you need is to update the array containing variable data fields that you are modifying. You will need to remove the data you chose to remove from the array, or keep adding if you are adding new values. You will then need to pass updated array as you click on ABBRECHEN and need to update the new values in the DB. The data removed from the array will create empty spaces in the array, you can either remove it on the Angular or Backend, or simply put the logic to skip if particular index is null/undefined.
Our team is creating a mdDialog that brings up a tabbed form and using ng-switch for different input types. Our ng-model works on choice inputs, boolean inputs, and string inputs, but keep getting an error for mddatepicker.
<div ng-switch-when="choice">
<md-input-container class="md-block">
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-select id={ {element.section_element_name}} type="selectbasic" value={{element.q_value}} ng-model="element.answer">
<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>
</div>
<div ng-switch-when="boolean">
<md-checkbox id={ {element.section_element_name}} ng-model="element.answer">{{element.section_element_label}}</md-checkbox>
</div>
<div ng-switch-when="glide_date">
<md-input-container>
<label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>
<md-datepicker id={ {element.section_element_name}} ng-model="element.answer" md-placeholder="Enter date"></md-datepicker>
</md-input-container>
</div>
When the form is submitted, we see an error: The ng-model for md-datepicker must be a Date instance. Currently the model is a: string
How can we modify the code so that the ng-model for just mddatepicker's get transformed into a date format?
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.
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 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