角度材料設計でネストされたリストビューを実装する方法

Question

jquery mobileに実装されている以下のような入れ子リストビューコンポーネントを作成する方法はありますか？

https://demos.jquerymobile.com/1.2.0/docs/lists/lists-ul.html

Answer 1

私は、ネストされたリストのUIを作成するために、角材料タブコンポーネントのスタイルを使用していました。ここでデモを見つけることができます。

http://codepen.io/ramanathanMuthuraman/pen/rLpBxQ

HTML

<div ng-app="appName"> 
<div ng-controller="MainController as vm"> 
    <md-toolbar class="site-content-toolbar"> 
     <h2 class="md-toolbar-item md-breadcrumb md-headline"> 
     <span class="md-padding">{{vm.title}}</span> 
    </h2> 
    </md-toolbar> 
    <md-divider></md-divider> 
    <md-content class="md-tabs"> 
     <div ng-class="vm.isDrilldownView?'md-left':'md-active'" class="md-tab-content dynamic-height"> 
      <div ng-class="{'md-left':vm.isDrilldownView}" ng-if="!vm.isDrilldownView"> 
       <md-list> 
        <md-list-item ng-click="vm.nextView(employee)" ng-repeat="employee in vm.employeeList 
" class="md-3-line"> 

         <div class="md-list-item-text " layout="column"> 
          <h3>{{ employee.employeeID }}</h3> 
          <h4>{{ employee.name }}</h4> 
          <p>{{ employee.overallScore }}</p> 
         </div> 
         <md-button class="md-primary md-raised">&gt;</md-button> 
         <md-divider></md-divider> 
        </md-list-item> 
       </md-list> 
      </div> 
     </div> 
     <div ng-class="vm.isDrilldownView?'md-active':'md-right'" class="md-tab-content dynamic-height"> 
      <div class="drilldownView" ng-if="vm.isDrilldownView"> 
       <md-whiteframe class="md-whiteframe-1dp md-padding" layout="column" layout-align="center"> 
        <h5 flex>ID: {{ vm.employee.employeeID}}</h5> 
        <h5 flex>Name: {{ vm.employee.name }}</h5> 
        <h5 flex>Overall Score :{{ vm.employee.overallScore }}</h5> 
       </md-whiteframe> 
       <div layout="row" layout-align="center" flex> 
        <md-button ng-click="vm.prevView()" class="md-primary md-raised">&lt; BACK</md-button> 
       </div> 
    </md-content> 
</div> 

JS

(function() { 

angular 
    .module("appName", ['ngMaterial']) 
    .controller("MainController", MainController); 

function MainController() { 
var vm = this; 
    vm.title = "View Summary"; 
    vm.isDrilldownView = false; 
    vm.employeeList = [{ 
     "employeeID": "1", 
     "name": "Thomas", 
     "overallScore": 80 
    }, { 
     "employeeID": 2, 
     "name": "Maya", 
     "overallScore": 80 
    }]; 

    vm.nextView = function(employee) { 
     vm.isDrilldownView = true; 
     employee.individualScore = [{ 
      "name": "Goal Score", 
      "value": "100" 
     }, { 
      "name": "Performance", 
      "value": "100" 
     }, { 
      "name": "Attendance", 
      "value": "100" 
     }, { 
      "name": "Skill set", 
      "value": "100" 
     }]; 
     vm.employee = employee; 
    }; 

      vm.prevView = function() { 
     vm.isDrilldownView = false; 
    }; 



}; 

})(); 

CSS

.md-tabs { 
    overflow: visible; 
} 

.md-tab-content { 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .2s; 
} 

.md-tab-content.md-left:not(.md-active) { 
    -webkit-transform: translateX(-100%); 
    transform: translateX(-100%); 
    animation: 1s md-tab-content-hide; 
    opacity: 0; 
} 

.md-tab-content.md-right:not(.md-active) { 
    -webkit-transform: translateX(100%); 
    transform: translateX(100%); 
    animation: 1s md-tab-content-hide; 
    opacity: 0; 
}