标签: angular-material

当用户在md-datepicker组件上选择日期时，我需要调用服务器以检查所选日期的计划。问题是，我无法使用ng-change触发函数，这似乎是执行此操作的唯一选择。有什么想法为什么这不起作用？

form.html

<div
    layout-padding>
    <form
        name="form"
        novalidate
        ng-submit="form.$valid && save()">
        <div
            layout>
        <md-input-container 
            class="md-block" 
            flex="100">
            <label>Nome Completo</label>
            <input 
                name="fullName" 
                ng-model="costumer.fullName" 
                required
                disabled/>
            <div 
              ng-messages="form.fullName.$error">
                <div ng-message="required">O cliente não foi específicado</div>
              </div>
        </md-input-container>
        </div>
        <div
            layout>
        <md-input-container 
            flex>

          <label>Data</label>
          <md-datepicker
              name="date"
              ng-model="appointment.when"
              md-open-on-focus
              md-min-date="today">

          </md-datepicker>

          <div 
              ng-messages="form.date.$error">
            <div ng-message="valid">Data inválida</div>
            <div ng-message="mindate">Data anterior à atual</div>
          </div>
        </md-input-container>

        <md-input-container
            flex="50">
            <label>Horário</label>
            <md-select 
                name="whatTime"
                ng-model="appointment.whatTime"
                required>
                <md-option value="0">08:00 - 09:00</md-option>
                <md-option value="1">09:00 - 10:00</md-option>
                <md-option value="2">10:00 - 11:00</md-option>
                <md-option value="3">13:00 - 14:00</md-option>
                <md-option …

如何摆脱md-chips中的下划线 - 131,132和T下的线？

码

<div layout="row">
  <div flex>
    <md-chips ng-model="condition.list" readonly="true" md-removable="false">
      <md-chip-template>
        <span>{{$chip.id}}</span>
      </md-chip-template>                  
    </md-chips>
  </div>
 </div>

看起来像这样

我正在使用填充对象列表md-nav-list。当用户单击时md-list-item，我想导航到候选详细路由器，并将其传递给candidate.id它。

不知道如何在上呼叫路由器md-list-item。

  <md-nav-list *ngFor="let candidate of candidates">
    <md-list-item class="candidate-row">
      <div class="column2">
        <span class="name">{{candidate.name}},</span>
      </div>
    </md-list-item>
  </md-nav-list>

候选人详细信息的路由器是
{path: 'candidate/:id', component: CandidateDetailsComponent}

其余代码可以在这里找到 https://github.com/himanshuy/hiringplus-ui/tree/page2

我正在尝试更改AngularMaterial提供的循环进度条的颜色.我尝试使用css将其颜色更改为白色,但它不起作用,进度条的颜色保持蓝色.我究竟做错了什么？

.centeredPLEASE_WAIT {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100%;
  font-size: 20px;
}


.my-circular-progress {
  color: white;
  border-right: #ddd;
  border-left: #ddd;
  border-top: #ddd;
  border-bottom: #ddd;
  background-color: red;
}

            <div class="centeredPLEASE_WAIT">
                <md-progress-circular class="my-circular-progress" md-mode="indeterminate"></md-progress-circular>
            </div>

根据要求，我要在按钮处于活动状态时将其设置为使用强调色突出显示。

就像是

<button md-button *ngFor="let item of items" [attr.color]="item.caption == activeItem ? 'accent' : ''">

或类似的东西

<button md-button *ngFor="let item of items" color="{{ item.activeColor }}"

我似乎可以在Angular 1中做到这一点，但在Angular 2中没有效果。

有人可以帮忙吗？

谢谢

http://codepen.io/anon/pen/ggRQqR

我正在尝试将工具提示添加到工具栏中的工具提示.

但是,工具提示相互重叠,我没有按预期获得功能.

工具提示应仅在我将鼠标悬停在确切按钮上时显示.

我添加了两个屏幕截图,显示了奇怪的行为.

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">

     <md-fab-toolbar class="md-fab md-accent md-fab-bottom-right">
        <md-fab-trigger class="align-with-text">
            <md-button aria-label="menu" class="md-fab md-primary">
                <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
                <md-tooltip>Options</md-tooltip>
            </md-button>
        </md-fab-trigger>
        <md-toolbar>
            <md-fab-actions class="md-toolbar-tools">
                <md-button aria-label="Save" class="md-icon-button" ng-click="vm.update()" ng-disabled="vm.loading || vm.data.length==0" >
                    <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
                    <md-tooltip>Save</md-tooltip>
                </md-button>
                <md-button aria-label="Reset" class="md-icon-button"  >
                   <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon> <md-tooltip>Refresh</md-tooltip>
                </md-button>

            </md-fab-actions>
        </md-toolbar>
    </md-fab-toolbar>

</div>

我想通过单击Button将Input-Value传递给函数.

<md-card> 
     <md-input-container><input mdInput ngDefaultControl [ngModel]="newInput">
     </md-input-container> 
     <button md-raised-button (click)="newInputValue(newInput)">Update</button>
</md-card>

但是函数newInputValue(..)中newInput的值总是未定义的.

我想在我的角度2素材项目的屏幕底部(而不是页面)添加一个粘滞按钮.我尝试了一些调整,但目前当我向下滚动按钮时,它并没有停留在它应该是的位置.

在滚动之前它看起来像下面:

滚动后:

模板中元素的HTML:

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

CSS应用于元素除了任何默认值:

#fab{
    position: fixed;
    right: 30px;
    bottom: 30px;
}
*{
    margin: 0;
}

1. 我怎样才能解决这个问题？
2. 另外有任何内置的Angular材料可以做我想要的吗？

更新:

我的主要组件的模板:

<toolbar></toolbar>
<side-nav></side-nav>

Side Nav的模板:

<md-sidenav-container id="sidenav-container">

    // contents

    <router-outlet></router-outlet>

</md-sidenav-container>

和它的CSS:

#sidenav-container { // styling to make side nav of full height
    position: fixed;
    height: 90%;
    min-height: 90%;
    width: 100%;
    min-width: 100%;
}

然后在路由器插座添加的组件内部将出现FAB元素.

Notes-list组件的模板(图像中显示的模板):

<a md-fab id="fab">
    <md-icon>add</md-icon>
</a>

//rest of the content

现场演示

按照官方演示应用程序中的示例，我编写了以下代码：

<md-button-toggle-group name="typeToggle" [(ngModel)]="chosenType" multiple>
  <md-button-toggle *ngFor="let type of subTypes" [value]="type">
    {{type}}
  </md-button-toggle>
</md-button-toggle-group>

但是我得到了错误

core.es5.js:1084 
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'typeToggle'
Error: No value accessor for form control with name: 'typeToggle'

我想念什么吗？

对评论的回应：

删除name属性将导致：

core.es5.js:1084 
ERROR Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute
Error: No value accessor for form control with unspecified name attribute

删除可以multiple …

我是角质材料的新手.我正在尝试使用角度材料来实现警报以显示消息,这在引导警报中是相似的,即.

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

任何人都可以帮助我在角材料中实现最佳方法是什么？

非常感谢