引导下拉菜单在单击后消失

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>

上面是我正在使用的引导 + 角度下拉代码。但是，一旦我单击下拉列表，它就会消失。我正在使用 angular1 + boostrap 3.3.7 和 jquery 1.12.4 库。没有使用其他脚本或js。

下面是角度函数

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查看修改后的控制器。

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);
    }   
});

Answer 2

请看

var app = angular.module('main', []);
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);
    }   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="main" class="container" ng-controller="serviceHistoryController">
   Normal :  <select>
      <option>select</option>
  <option ng-repeat="sutname in sutlist">  {{sutname.name}}</option>
   </select>
  <br/>  <br/>
    <!-- Search box Start -->
    <div class="dropdown col-xs-8">
         Bootstrap <button class="btn btn-default col-xs-4" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="flase" aria-expanded="true">
           Click Here
            <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>