为什么<ul>会在我的Angular / Laravel项目中显示?

时间:2016-09-28 13:59:43

标签: angularjs twitter-bootstrap laravel-5

我希望这是非常愚蠢的事情(如果是的话,谢谢,抱歉!)但是我很难过。

我正在尝试使用此处的示例 - http://jsfiddle.net/sp6bL/在我的Angular项目中创建一个包含子菜单的下拉菜单。

我已将此添加到我的视图中;

<div class="menu">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
   <li ng-repeat="item in items" 
       ng-class="{'dropdown-submenu': item.submenu && item.submenu.length}">        
        <a href="@{{ item.link }}">@{{item.name}}</a>
       <ul ng-if="item.submenu && item.submenu.length" 
           class="dropdown-menu">
         <li ng-repeat="subitem in item.submenu">
           <a href="@{{subitem.link}}">@{{subitem.name}}</a>
         </li>
       </ul>
   </li>
</ul>
</div>

这在我的控制器中;

   $scope.items = [
    {
        name: "Menu Item 1",
        link: "#main1",
        submenu: null
    },
    {
        name: "Menu Item 2",
        link: "#main2",
        submenu: null
    },
    {
        name: "Menu Item 3",
        link: "#main3",
        submenu: [
            {
                name: "Sub Item 1",
                link: "#sub1"
            },
            {
                name: "Sub Item 2",
                link: "#sub2"
            }
        ]
    }
    ];

页面上没有呈现任何内容且没有错误。当我从浏览器中查看页面源时,我得到了这个;

<div class="menu">
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     <li ng-repeat="item in items" ng-class="{'dropdown-submenu': item.submenu && item.submenu.length}"><a href="{{ item.link }}">{{item.name}}</a>
    <ul ng-if="item.submenu && item.submenu.length" class="dropdown-menu">
        <li ng-repeat="subitem in item.submenu"><a href="{{subitem.link}}">{{subitem.name}}</a></li>
    </ul>
    </li>
  </ul>
 </div>

但如果我在Chrome开发工具中查看元素,我可以看到ng-repeat正在执行。然而,没有任何表现。

咦?

编辑:我的一个css文件中的下拉菜单的Css样式设置为无。我看得见。

0 个答案:

没有答案