javascript - Bootstrap下拉菜单点击后消失

Question

<div class="container" ng-controller="serviceHistoryController">
    <!-- Search box Start -->
    <div class="dropdown col-xs-8">
          <button class="btn btn-default col-xs-4" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true">
            Select SUT
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu col-xs-8" aria-labelledby="dropdownMenu1">
            <li ng-repeat="sutname in sutlist">
                  <a href="#" ng-click="sutselected(sutname)">
                      {{sutname.name}}
                  </a>
            </li>
          </ul>
    </div>
</div>

上面是我正在使用的 Bootstrap + Angular 下拉代码。但一旦我点击下拉菜单，它就消失了。我正在使用 angular1 + boostrap 3.3.7 和 jquery 1.12.4 库。没有使用其他脚本或 js。

下面是 Angular 函数

app.controller("serviceHistoryController",function($scope){    
    let menuitems = [{"sutid":"1","name":"AA"},
                    {"sutid":"2","name":"BB"},
                    {"sutid":"3","name":"CC"},
                    {"sutid":"4","name":"DD"},
                    {"sutid":"4","name":"EE"}]
    $scope.sutlist = menuitems;
    $scope.selectedSUT;

    $scope.sutselected = function(sutname){
        $scope.selectedSUT = sutname;
        alert("dropdown sut selected:"+$scope.selectedSUT.name);
    }   
});

Answer 1

问题出在您的数据类型上让使用var查看修改后的 Controller 。

app.controller("serviceHistoryController",function($scope){    
    var menuitems = [{"sutid":"1","name":"AA"},
                    {"sutid":"2","name":"BB"},
                    {"sutid":"3","name":"CC"},
                    {"sutid":"4","name":"DD"},
                    {"sutid":"4","name":"EE"}]
    $scope.sutlist = menuitems;
    $scope.selectedSUT;

    $scope.sutselected = function(sutname){
        $scope.selectedSUT = sutname;
        alert("dropdown sut selected:"+$scope.selectedSUT.name);
    }   
});