Question

我目前正在尝试使用angular.js和bootstrap ui构建一个应用程序，并且我使用折叠导航进行堆叠。

问题是我有一个应该工作的ng-repeat但是当我点击导航栏时，它看起来像是折叠但是没有显示任何元素。这是我的HTML标记。

<a href="#" ng-controller="CollapseCtrl">
    <ul class="list-unstyled">
        <li class="nav-header"> 
            <a href="#" ng-click="isCollapsed = !isCollapsed" ><h5>Settings 
                <i class="glyphicon glyphicon-chevron-right"></i></h5>
            </a>
            <ul class="list-unstyled collapse in" collapse="isCollapsed">
                <li ng-repeat="element in first"><a href="#"><i class='{{element.icon}}'></i>{{element.title}}</a></li>
            </ul>
        </li>
    ......Some other nav-header with other lists
    </ul>
</a>

这是我的剧本

var myAppModule = angular.module('myApp', ['ui.bootstrap']);
myAppModule.controller('CollapseCtrl', function($scope) {

    $scope.first = [
        {title : 'Home', icon : 'glyphicon glyphicon-home' },
        {title : 'Messages', icon : 'glyphicon glyphicon-envelope' },
        {title : 'Options', icon : 'glyphicon glyphicon-cog' },
        {title : 'Shoutbox', icon : 'glyphicon glyphicon-comment' },
        {title : 'Staff List', icon : 'glyphicon glyphicon-user' },
        {title : 'Transactions', icon : 'glyphicon glyphicon-flag' },
        {title : 'Rules', icon : 'glyphicon glyphicon-exclamation-sign' },
        {title : 'Logout', icon : 'glyphicon glyphicon-off' }
    ];

    $scope.isCollapsed = false;

});

我试着用小提琴来构建列表，我发现这不是ng-repeat工作方式的问题。

我真的没有看到我的错误，所以我希望你能帮助我，这一定是个愚蠢的错误......

由于

Answer 1

出于某种原因，它似乎不喜欢将控制器附加到锚点将<a href="#" ng-controller="CollapseCtrl">更改为<div style="cursor: pointer;" ng-controller="CollapseCtrl">似乎可以解决问题。如果你需要href =＆＃34;＃＆＃34;那么就将div放在锚点附近。除了指针外观之外的东西。

见plunkr： http://plnkr.co/edit/6dLaOacDhHnc6038Y5MN?p=preview

折叠不显示在Angular中使用ng-repeat生成的列表

1 个答案: