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>

Above is the bootstrap + angular drop down code i am using. But once i clicked on the dropdown it get disappeared. I am using angular1 + boostrap 3.3.7 and jquery 1.12.4 library. No other scripting or js is used.

Following is the angular function

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

The problem was with your data type let use var see the modified 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);
    }   
});

Answer 2

Please See

 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>