单击后，Bootstrap下拉列表消失 [英] Bootstrap dropdown disappears after clicking it

问题描述

<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。

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.

以下是角度函数

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

推荐答案

请参阅

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>

这篇关于单击后，Bootstrap下拉列表消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！