Question

遇到问题，我试图使用Angular Material，Tabs和Dialog。

我正在寻找的是在内部显示标签的对话框。在其中，我希望第一个标签填满100％的高度（减去标签标题，我添加的一个类＆＃34;页脚＆＃34;。

这是我开始的一个plnkr，但是因为我无法获得所有高度的列表项而陷入困境。

http://plnkr.co/edit/2szJQPaMfXF4utyQO1X1?p=preview

如果向下滚动标签1上的列表，您将看到＆＃34;页脚＆＃34;，我根本不想滚动它。该项目将固定在对话框的底部。

<md-dialog aria-label="Mango (Fruit)">
  <md-dialog-content>
    <div class="md-dialog-content">
      <md-tabs>
        <md-tab label="First Tab">
          <md-content flex>
            <md-list flex>
              <md-item ng-repeat="item in items">
                <md-item-content>
                  <div flex class="md-tile-content">
                    {{item}}
                  </div>
                </md-item-content>
                <md-divider></md-divider>
              </md-item>
            </md-list>
          </md-content>
          <div class="footer">
            Footer should be at the bottom
          </div>
        </md-tab>
        <md-tab label="Second tab">
          <md-list flex>
            <md-item ng-repeat="item in items">
              <md-item-content>{{item}}</md-item-content>
            </md-item>
          </md-list>
        </md-tab>
      </md-tabs>
    </div>
  </md-dialog-content>
</md-dialog>

Answer 1

所以，我有一个解决方案，认为粘性页脚不能在每个标签内。虽然这有点像破坏者，但我可以解决这个问题并使用ng-if在需要时显示粘性页脚。

如果有人知道如何在每个标签中设置粘性页脚并按照第一个标签的方式进行操作，那么对您的称赞和答案将被授予。

http://plnkr.co/edit/6bkgGW?p=preview

<md-dialog aria-label="Mango (Fruit)" layout="column" layout-fill>
  <md-dialog-content layout="column" flex>
    <md-tabs layout="column" flex>
        <md-tab label="First Tab">
          <md-content>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
            <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p>
          </md-content>
          <div class="footer">
            Footer should be at the bottom
          </div>
        </md-tab>
        <md-tab label="Second tab">
          <md-list>
            <md-item ng-repeat="item in items">
              <md-item-content>{{item}}</md-item-content>
            </md-item>
          </md-list>
        </md-tab>
      </md-tabs>
  </md-dialog-content>

  <md-dialog-actions layout="row">
    <md-button ng-click="answer('useful')" style="margin-right:20px;">
      Useful
    </md-button>
  </md-dialog-actions>
</md-dialog>

带有对话框，标签和固定页脚的Angular JS

1 个答案: