单击后，Bootstrap下拉列表消失

  
  Select SUT   
 
  {{sutname.name}}  
 
 
  

以上是我正在使用的bootstrap + angular下拉代码。 但是一旦我点击了下拉列表，它就会消失。 我正在使用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); } }); 

     
 Normal :  select  {{sutname.name}}  
 
  
 Bootstrap  Click Here   
 
  {{sutname.name}}