angularjs – 如何使角形材料可扩展？

发布时间：2020-12-17 07:10:13 所属栏目：安全来源：网络整理

导读：我通过使用md-card标签循环显示动态内容.我想要实现的是通过像手风琴一样扩展它来点击md-card时显示其他信息. 有没有人试过这个？解决方法你可以使用md-item / md-card md-item ng-repeat="user in users" class="item" ng-class="{ 'selected-item': $ind

我通过使用md-card标签循环显示动态内容.我想要实现的是通过像手风琴一样扩展它来点击md-card时显示其他信息.

有没有人试过这个？

解决方法

你可以使用md-item / md-card

<md-item ng-repeat="user in users" class="item"
         ng-class="{ 'selected-item': $index == selectedUserIndex}">
        <md-item-content class="user tile md-whiteframe-z1"
                         ng-class="{ 'selected md-whiteframe-z2': $index == selectedUserIndex}"
                         layout="column">
          <div layout="row" layout-fill ng-click="selectUserIndex($index)" class="folded">
            <div class="md-tile-left">
              <img ng-src="{{ user.face }}" class="face">
            </div>
            <div class="md-tile-content" layout="column" layout-align="center start">
              <h3>{{ user.name.first + " " + user.name.last }}</h3>

              <p ng-hide="$index == selectedUserIndex">
                <span>Something</span>
              </p>
            </div>
          </div>
          <md-divider layout-fill ng-show="$index == selectedUserIndex"></md-divider>
          <div layout="column" layout-fill class="expanded">
            <span>some content</span>
            <br/>
            <span>some content</span>
            <br/>
            <span>some content</span>
            <br/>
            <span>some content</span>
            <br/>
            <span>some content</span>
            <br/>
            <span>some content</span>
            <br/>
            <span>some content</span>
          </div>
        </md-item-content>
        <md-divider class="divider-inset" ng-if="!$last"></md-divider>
      </md-item>

DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!