角材の作り方<md-card>拡張可能ですか？

Question

md-cardタグでループして動的コンテンツを表示しています。私が達成したいのは、アコーディオンのように拡大してmd-cardをクリックすると、追加情報を表示することです。

すでに誰かがこれを試しましたか？

Answer 1

あなたは

<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