點擊後引導下拉消失

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>