Question

我正在尝试在我的网站上做一个树状菜单。我想在单击父项时显示/隐藏子项。此解决方案不起作用。甚至它将item.active值更改为false / true。任何想法我的朋友？

这是我的HTML：

<div id="sidebar-wrapper">
<div class="cssTreeMenu tree">
    <ul class="sidebar-nav">
         <li ng-repeat="item in items" >
            <a ui-sref="{{item.sref}}" ui-sref-active="active" ng-click="testcolaps($index)">{{item.name}}</a>              
            <ul ng-show="{{item.active}}" class="navbarColorOnClick">
                <li ng-repeat="subItem in item.subItems" ui-sref-active="active">
                    <a ui-sref="{{subItem.sref}}">{{subItem.name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的控制器：

 $scope.testcolaps = function (index) {
    $scope.items[index].active = !$scope.items[index].active;     
};

$scope.items = [
    {
        name: "Test",
        sref: "kpi.test",
        active: false,
        subItems: [
            {
                name: "Selectable KPI menu",
                sref: "kpi.selectableKpiMenu"
            },
            {
                name: "Test",
                sref: "kpi.test"
            }
        ]
    },
     {
         name: "Test2",
         sref: "kpi.test",
         active: false,
         subItems: [
             {
                 name: "Selectable KPI menu 2",
                 sref: "kpi"
             },
             {
                 name: "Test 2",
                 sref: "internal"
             }
         ]
     },
];

您可以将我的项目设置为active:属性，我将其更改为true / false。但我的菜单中仍然没有任何反应。如果我将其硬编码为true，它会显示它应该但仍然无法使用click事件。

Answer 1

ng-show内的表达式需要一个没有{{}}插值的表达式。基本上您需要删除{{}}。

ng-show="item.active"

子菜单在我的ng-click（$ index）上没有显示/隐藏

1 个答案: