小编Mic*_*rek的帖子

在AngularJS + Bootstrap中动态添加下拉菜单

我正在编写一个模块,可以动态创建动态菜单.如何在添加新<li>的css类后运行指令,该类dropdown也由ng-class添加.
代码:

angular.module('myapp', ['ui.bootstrap'])
.factory("menuService", ["$rootScope", function($rootScope) {
    "use strict";

    return { 
        menu: function() {
            $rootScope.globalMenu;
        },    
        setMenu: function(menu) {
            $rootScope.globalMenu = menu;
        }
    };

}])
.controller("MainController", ["$scope", "menuService",
    function($scope, menuService){

        menuService.setMenu([{href:"#", label:"Dropdown",
                                dropdown:[{href:"/edit", label:"Edit"}]},
                             {href:'/', label:'test'}]);

        $scope.bodyText = "Some text";


    }]);
Run Code Online (Sandbox Code Playgroud)

这是html中的代码

    <ul class="navbar-nav nav navbar-left">
        <li ng-repeat="menu_element in globalMenu" ng-class="{dropdown: menu_element.dropdown != undefined}">
            <a ng-href="{{menu_element.href}}" ng-class="{'dropdown-toggle': menu_element.dropdown != undefined}">
                {{menu_element.label}}
                <b class="caret" ng-if="menu_element.dropdown != undefined"></b>
            </a>
            <ul ng-if="menu_element.dropdown != undefined" class="dropdown-menu">
                <li ng-repeat="sub_element in …
Run Code Online (Sandbox Code Playgroud)

javascript twitter-bootstrap angularjs twitter-bootstrap-3

2
推荐指数
1
解决办法
2万
查看次数