Angularjs动态填充Bootstrap Dropdown

时间:2015-10-04 23:12:21

标签: javascript angularjs twitter-bootstrap angular-ui

一旦函数返回了我想在菜单中显示的数据(使用AngularUI),我正在尝试动态构建bootstrap下拉菜单元素。

在我正在处理的应用程序中,我必须初始化数据请求,然后在返回数据时触发不同的函数。所以我试着从第二个函数中逐步打开下拉菜单,如下所示:

在我的Angularjs控制器中:

// This is the function that is triggered by the button to open the menu:    
$scope.getData = function(owner){
        API.getData(owner);
    }


    // This is the function that is triggered by the thirdparty API, and contains the data for the menu
        $scope.returnedData = function(owner, data){
            for (var n = 0; n < data.length; n++) {
                $scope.menuItems.push(data[i]);
            }
            $scope.$apply();

            for(var s = 0; s < $scope.schema.length; s++){
                if($scope.schema[s].owner == owner){
                    console.log('opening menu');
                    $scope.schema[s].menu = true; // <-- Here I open the menu
                }
            }

            $scope.$apply();

        }

这是显示下拉菜单的html:

<div class="round-button" id="menu{{$index}}" class="btn btn-primary" ng-click="getData(module.owner)">
  <a href="#">+</a>
</div>

<div dropdown is-open="module.menu">
  <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="menu{{$index}}">
    <li class="dropdown-submenu" ng-repeat="item in menuItems">
      <a tabindex="-1" href="#">item</a>
    </li>
  </ul>
</div>

下拉菜单成功打开,但没有任何项目。

我真的很感激有关如何使其发挥作用的任何建议。 TIA!

0 个答案:

没有答案