md-card内的md-switch / md-button

时间:2016-07-22 11:41:51

标签: angular-material jquery-hover

我想在md-card中显示md-switch和md-button。我能够在正确的位置显示md-card内的文本,但连接到该文本的开关显示在其他位置。

用鼠标悬停在某些内容上时会显示卡片。

DemoCode.html

<md-card>
        <md-card-header>
            <md-card-header-text>
                Sample 1
            </md-card-header-text>
        </md-card-header>
        <md-card-content>
        </md-card-content>
        <md-card-actions>
                <md-switch ng-model="data.cb2" aria-label="Switch" ng-true-value="'true'" ng-false-value="'false'">
                    {{ data.cb2 }}
                </md-switch>
        </md-card-actions>
    </md-card>    

1 个答案:

答案 0 :(得分:0)

我不确定我是否按照您的问题标题和问题内容进行操作,但这里有一个将元素放入卡片中的示例 - CodePen

如果这不是您所需要的,请在编辑中进一步说明。

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-card>
    <md-card-header layout="row">
      <md-card-header-text>
        Sample 1
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
    </md-card-content>
    <md-card-actions layout="row" layout-align="start center">
      <label>My Switch</label>
      <md-switch ng-model="data.cb2" aria-label="Switch" ng-true-value="'true'" ng-false-value="'false'">
        {{ data.cb2 }}
      </md-switch>
      <md-button class="md-raised">Hello</md-button>
    </md-card-actions>
  </md-card>
</div>