使用 angularjs 创建水平菜单

Question

我想创建一个类似 this 但不使用 ng-repeat 的菜单：

<ul class="sidebar-navi">
    <li ng-repeat="item in items" ng-click="showChilds(item)">
        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>{{item.name}}</a>
        <ul>
            <li ng-show="item.active">
                <span>First</span>
            </li>
            <li ng-show="item.active">
                <span>Second</span>
            </li>
        </ul>
    </li>
</ul>

问题是我没有找到将参数传递给此函数 showChilds（当前 li）的方法我尝试使用 id 但没有成功：

                    <ul class="sidebar-navi">
                        <li id="first" ng-click="showChilds(first)">
                            <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a>
                            <ul>
                                <li ng-show="first.active">
                                    <span>First</span>
                                </li>
                                <li ng-show="first.active">
                                    <span>Second</span>
                                </li>
                            </ul>
                        </li>
                        <li id="second" ng-click="showChilds(second)">
                            <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a>
                            <ul>
                                <li ng-show="second.active">
                                    <span>First</span>
                                </li>
                                <li ng-show="second.active">
                                    <span>Second</span>
                                </li>
                            </ul>
                        </li>
                    </ul>

我的控制器将只包含这个功能

  $scope.showChilds = function (item) {
    item.active = !item.active
  }

我不想再使用 $scope.items

Answer 1

我已经更新了你的HTML。如果您不使用 ng-repeat，那么您可以使用 ng-init 来初始化一个变量，并在 ng-click 上将该变量切换到 show/hide 子菜单。您更新的样本是 here

 <ul class="sidebar-navi">
                    <li id="first" ng-click="first = !first" ng-init="first = false">
                        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>1</a>
                        <ul>
                            <li ng-show="first">
                                <span>First</span>
                            </li>
                            <li ng-show="first">
                                <span>Second</span>
                            </li>
                        </ul>
                    </li>
                    <li id="second" ng-click="second = !second" ng-init="second = false">
                        <a href="" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-cogs sidebar-nav-icon"></i>2</a>
                        <ul>
                            <li ng-show="second">
                                <span>First</span>
                            </li>
                            <li ng-show="second">
                                <span>Second</span>
                            </li>
                        </ul>
                    </li>
                </ul>

使用 angularjs 创建水平菜单

creating horizontal menu with angularjs

sidebar

angularjs