md-select

Angular-material - Change separator in md-select multiple option

由 僤鯓⒐⒋嵵緔 提交于 2021-01-27 14:41:52
问题 I have an md-select in my form with multiple options (same as demo in Angular Material site). It shows a comma separated list of selected options in its input field. Is there any way to change separator? (for example change comma to star or another UTF-8 character). 回答1: You can do something with pure CSS. You should hide the commas using visibility: collapse and after that, you can add a Unicode icon with :after or :before pseudo-element. PLUNKER HTML <md-select class="my-select" ng-model=

Click outside md-select is not working

由 微笑、不失礼 提交于 2020-01-07 06:43:52
问题 select in dialog - angular material - mdpanel using sample md-select but click outside the select when the options are open is not working. how can I fix it ? thx a lot html: <md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}"> <md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option> </md-select> 回答1: fixed: I have removed the "zIndex" property from md-panel or md-dialog config object 来源： https://stackoverflow.com/questions/42052162

Angular 2 material mat-select programmatically open/close

由 不羁岁月 提交于 2020-01-02 01:16:14
问题 Does any one know how to programmatically open or close mat-select? As pert the api there are methods for open and close but don't know how to call those methods from component and there isn't any example showing that on site. Thanks 回答1: In order to access these properties you need to identify the DOM element and access it with a ViewChild : component.html <mat-select #mySelect placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }} <

Angular material md-select not closing when in mdDialog

由 风格不统一 提交于 2019-12-24 06:57:26
问题 I am using angular material version 1.1.4, angular version 1.5.9 and I have the following issue with an md-select directive. I open a dialog using $mdDialog service on a click of a button. The dialog is fullscreen. Inside I have multiple inputs, along with an md-select input. On md-select you can choose multiple items, so it doesn't automatically close after choosing an item from the list. After opening it and selecting the items you desire, you click outside of it to close it and get to the

Angular Material md-select load options in async way

由 元气小坏坏 提交于 2019-12-24 06:13:15
问题 I need to load select's options asynchronously ( through a service), using the Angular Material md-select component. Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem. The expected behavior is shown at this link (AngularJs Material) The actual behavior is shown at this link. Is Async options' loading supported by md-select ? 回答1: The reason you need to click twice is because when you first click, there are no

How to set md-select panel to be open by default

由 蹲街弑〆低调 提交于 2019-12-23 05:17:27
问题 I am using angular4 with Redux and angular material to design my web page. I am trying to set the md-select panel to be open. example scenario: click button dispatches an action to open the select panel opens to dispaly all options. I am using redux actions to manipulate my components state. So basically I need to fire an action to set the select to open. Any suggestions? 回答1: Using the Material2 example as starting point for this answer. Here is how you can do that: Give an id to your panel,

Angular-Material : md-select in md-dialog not closing

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-10 20:39:43
问题 I've created a simple directive that consists in a form with few md-input and one md-select . I've used my directives in a few pages now and everything works fine, but now i would like to use it inside an md-dialog and it's not working as expected, i can't close the md-select-menu if i click outside of it, even if i focus an md-input. So the only two ways for the user to close the menu is to either select an option or dismiss the dialog. It's not that bad but i found this rather annoying.

How to disable md-select

由 一世执手 提交于 2019-12-10 15:53:28
问题 I need to disable a md-select but I couln't find it in the Angular documentation. This is my code: <md-select ng-model="idSelectedMonth" placeholder="Month"> <md-option ng-repeat="month in months" ng-value="month.number"> {{month.number}} </md-option> </md-select> 回答1: you can use ng-disabled="true" on md-select tag like below (function () { 'use strict'; var app = angular.module("App",["ngMaterial"]); app.controller("ctrl", [function () { /* jshint validthis: true */ var vm = this; vm.title

Setting selected item in angular md-select with multiple option

由 佐手、 提交于 2019-12-06 15:33:36
问题 Setting selected item in angular md-select with multiple option <md-select multiple ng-model="Reg.roles" placeholder="Please select roles" required> <md-option ng-repeat="role in roles" value="{{role.value}}" ng-selected="{{ role.value === '<%= data.roles %>' ? 'true' : 'false' }}">{{ role.name }}</md-option> </md-select> in my controller $scope.roles = [{ "name": "Account Admin", "value": "account_admin" }, { "name": "Developer", "value": "developer" }, { "name": "Analyst", "value": "analyst

Setting selected item in angular md-select with multiple option

由 独自空忆成欢 提交于 2019-12-04 23:16:21
Setting selected item in angular md-select with multiple option <md-select multiple ng-model="Reg.roles" placeholder="Please select roles" required> <md-option ng-repeat="role in roles" value="{{role.value}}" ng-selected="{{ role.value === '<%= data.roles %>' ? 'true' : 'false' }}">{{ role.name }}</md-option> </md-select> in my controller $scope.roles = [{ "name": "Account Admin", "value": "account_admin" }, { "name": "Developer", "value": "developer" }, { "name": "Analyst", "value": "analyst" } ]; in view data.roles contains value: ['account_admin', 'developer'] I need the item corresponding
订阅 md-select