angular-material

问题 I'm testing out the md-chips directive in AngularJS. Is there any way of stacking the 'chips' vertically instead of appending the chips horizontally? I have been trying out the demos found here: https://material.angularjs.org/latest/demo/chips 回答1: The following CSS style is the minimum needed to enable chips to stack vertically: md-chip { clear: left; } The default CSS of md-chip's is float: left and applying clear: left causes the chips to clear each other and stack vertically. Applying

问题 today I'm tryng to configure angular material with requirejs but I receive an annoing problem: Error: ngMaterial requires HammerJS to be preloaded. This's my configurator file: require.config paths: jquery: "../bower_components/jquery/dist/jquery" domReady: "../bower_components/requirejs-domready/domReady" underscore: "../bower_components/underscore/underscore" store: "../bower_components/store-js/store" moment: "../bower_components/moment/min/moment-with-langs" jsonPath: "../libs/jsonpath-0

问题 Edit: I just don't know why, but change detection stop at the first child in the hierarchy. If I manually invoke change detection one level deeper (in sch-job-detail ), then the values are updated. I've built a MatTable with expandable rows. The "expandable" row part is as follow: <!-- Hidden cell --> <ng-container matColumnDef="expandedDetail"> <td mat-cell *matCellDef="let jobModel" [attr.colspan]="displayedColumns.length"> <div class="detail-cell" *ngIf="jobModel.isExpanded" [@detailExpand

问题 <div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'chart'}"> <md-icon md-menu-align-target md-svg-src="trending-up"></md-icon> <label>{{'LABELS.CHART' | translate}}</label> </md-button> <md-button ng-click="$ctrl.widget.type = 'card';$ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'card'}"> <md-icon md-menu-align

问题 I want to display some custom component/html between two rows on click. I believe the quick and easy solution would be to use the event from the click handler and manipulate the DOM directly however I'd like to do it the angular way if possible. For inspiration I first looked at this article on extending structural directive. It was of limited use though since *matRowDef isn't supposed to be used on its own, but in conjunction with other elements as part of the material table. I then went to

问题 I use angular-cli, angular-material 2 and I try to use the CKEditor (ng2-ckeditor). When I insert the CkEditor directly in the HTML (inside one div) there is no issue everything works. But when I move the CkEditor code under the following structure: <md-tab-group> <md-tab label="Another label description"> Contents 1 </md-tab> <md-tab label="Label description"> <div> <md-card> <md-card-header> <md-card-title> This is a title </md-card-title> </md-card-header> <md-card-content> <ckeditor name=

问题 I am using angular 2 material design for form fields. So with that every required fields appear with asterisk which i don't want.Also, for non-required fields, i want an optional text to be appear in brackets next to the label. I am using something like below to achieve it but that's not working. My code- <md-input required md-no-asterisk id="" placeholder="First Name" [(ngModel)]="" ngControl="txtFirstName" #firstName="ngModel"></md-input> When I am removing md-input starting and end tag and

问题 I'm trying to use the Angular Material CDK DragDrop module from https://material.angular.io/cdk/drag-drop/overview With the cdkDropListDropped event I can prevent dropping but it shouldn't be dragged either. How can I tell a cdkDropList or each cdkDrag elements to disable dragging? <div class="list-group" id="orderlist" cdkDropList (cdkDropListDropped)="drop($event)"> <a class="list-group-item" [class.linked]="ord.linkedToPrevious" [class.selected]="ord.selected" *ngFor="let ord of items"

问题 I am using the tabs component in angular material: https://material.angular.io/components/component/tabs Is there a way to make it such that I can swipe on the content area of the tab to trigger moving to the next tab? My current template html: <md-tab-group> <md-tab label="Tab 1">Content 1</md-tab> <md-tab label="Tab 2">Content 2</md-tab> </md-tab-group> I have hammerjs imported, and the documentation appears to not mention anything about this even though I could have sworn I've seen

问题 I'm using version 0.7.1 of angular material. I'm using the autocomplete as described here: Autocomplete demo However, it doesn't seem to support validation logic, even though it generates a textarea: Autocomplete directive documentation I imagine that I can add logic in the querySearch function to switch ng-valid to ng-invalid. Is this correct? If this is the case, then I need a handle on the md-autocomplete, but this is difficult, because the name attribute gets removed. 回答1: Quick update,