Question

<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
    <div class="cnt">
        <div class="menu-item" ng-click="toggle(1); open1=!open1">
            <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item</span>
                <i class="fa fa-chevron-down" ng-class="{'rotate180': open1, 'rotate-back': !open1}"></i>
            </md-list>
            <div class="sub-menu" ng-animate="'animate'" >
                <md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
                    <md-button>
                        <div layout="row" flex="">
                            <a ui-sref="{{item.link}}">
                                <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                            </a>
                        </div>
                    </md-button>
                </md-menu-item>
            </div>
        </div>
        <div class="menu-item" ng-click="toggle(2); open2=!open2">
            <md-list layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item 2</span>
                <i class="fa fa-chevron-down" ng-class="{'rotate180': open2, 'rotate-back': !open2}"></i>
            </md-list>
            <div class="sub-menu" ng-animate="'animate'" >
                <md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
                    <md-button>
                        <div layout="row" flex="">
                            <a ui-sref="{{item.link}}">
                                <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                            </a>
                        </div>
                    </md-button>
                </md-menu-item>
            </div>
        </div>
    </div>      
</div>

Answer 1

经过一些检查后，我注意到逻辑上有点故障，所以我稍微改了一下，主要的是现在你没有在$ scope open1，open2，open3和open4上有属性，你现在只有一个数组，所有内容都完成了该数组。你会注意到你需要为第一个开放元素传递0而不是1，因为它正在查看数组值。

<强> HTML：

<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
    <div class="cnt">
        <div class="menu-item" ng-click="toggle(1);">
            <md-list layout="row" layout-padding="" ng-class="{'orange': listOfItems[0]}" class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item</span>
                <i class="fa fa-chevron-down" ng-class="{'rotate180': listOfItems[0], 'rotate-back': !listOfItems[0]}"></i>
            </md-list>
            <div class="sub-menu" ng-animate="'animate'" >
                <md-menu-item ng-if="menuIsOpen===1" ng-repeat="item in data"  >
                    <md-button>
                        <div layout="row" flex="">
                            <a ui-sref="{{item.link}}">
                                <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                            </a>
                        </div>
                    </md-button>
                </md-menu-item>
            </div>
        </div>
        <div class="menu-item" ng-click="toggle(2);">
            <md-list layout="row" layout-padding="" ng-class="{'orange': listOfItems[1]}"  class="layout-row" layout-align="start center" flex> 
                <span class="title flex" flex=""> Menu Item 2</span>
                <i class="fa fa-chevron-down" ng-class="{'rotate180': listOfItems[1], 'rotate-back': !listOfItems[1]}"></i>
            </md-list>
            <div class="sub-menu" ng-animate="'animate'" >
                <md-menu-item ng-if="menuIsOpen===2" ng-repeat="item in data2">
                    <md-button>
                        <div layout="row" flex="">
                            <a ui-sref="{{item.link}}">
                                <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                            </a>
                        </div>
                    </md-button>
                </md-menu-item>
            </div>
        </div>
    </div>      
</div>

<强>的javascript：

angular.module('MyApp', ['ngMaterial', 'ngAnimate'])

    .controller('ListBottomSheetCtrl', function($scope) {
    $scope.data = 
        [{
            title: 'Home',
            icon: 'home',
            link: '/page1/'
        }, {
            title: 'Email Us',
            icon: 'envelope',
            link: '/page2/'
        }, {
            title: 'Profile',
            icon: 'user',
            link: '/page3/'
        }, {
            title: 'Print',
            icon: 'print',
            link: '/page4/'
        }];

    $scope.data2 = 
        [{
            title: 'Home 2',
            icon: 'home',
            link: '/page1/'
        }, {
            title: 'Email Us 2',
            icon: 'envelope',
            link: '/page2/'
        }, {
            title: 'Profile 2',
            icon: 'user',
            link: '/page3/'
        }, {
            title: 'Print 2',
            icon: 'print',
            link: '/page4/'
        }];

    $scope.listOfItems = [false,false,false,false];
    $scope.toggle = function(itemPos) {
        if($scope.listOfItems[itemPos-1]) {
            $scope.listOfItems = [false,false,false,false];
            itemPos = 0;
        }else {
            $scope.listOfItems = [false,false,false,false];
            $scope.listOfItems[itemPos-1] = true;
        }
        $scope.menuIsOpen = itemPos;        
    }
})

在css中我刚添加了类：

.orange { 
  background: orange 
};

一切都在这里： https://codepen.io/anon/pen/rGWJKo?editors=1010

如何在slidenav中的菜单子列表中的选定菜单上添加颜色

1 个答案: