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;
}

如何在角度材料设计中实现嵌套列表视图

1 个答案: