Bootstrap Dropdown + Angular data-ng-repeat

时间:2014-10-28 01:32:57

标签: javascript html angularjs twitter-bootstrap

我在试图用ng-repeat下拉显示一些数据(Villains / Villanos)时遇到了一些问题。我一直在环顾四周尝试,但我不能让它发挥作用。我有以下HTML:

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
<script> 
    // This function lets the dropdown button save the name of the Villain that it's selected.
    $(function(){
        $(".dropdown-menu li a").click(function(){
            $(".dropdown-toggle:first-child").text($(this).text());
            $(".dropdown-toggle:first-child").val($(this).text());
        });
    });
</script>

<div class="dropdown">
       <button class="btn btn-default dropdown-toggle dropdown-suspects-sides" type="button" id="dropdownMenu1" data-toggle="dropdown">
          Suspects
          <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li class="suspect" role="presentation" data-ng-repeat = "villain in villains">
             <a role="menuitem" tabindex="-1" href="#">
                <span class="glyphicon glyphicon-user"></span> {{villain}}
             </a>
          </li>
       </ul>                        
    </div>

/* Controllers */

...

$scope.getVillains = function() {
   $http.get("/getVillains")
      .success(function(data) {
         $scope.villains = data  
      }
   )
};

...

正如你所看到的,我正在尝试下拉以显示我拥有的所有恶棍。如果项目显示在正常列表中,则项目会正确显示,因此项目可以“使用”,但如果我尝试以这种方式显示它们,则它们不会出现。我很确定我在这里做错了但是我不知道它是什么。提前谢谢!

0 个答案:

没有答案