javascript - 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>
above bootstrap + angular drop down code using. once clicked on dropdown disappeared. using angular1 + boostrap 3.3.7 , jquery 1.12.4 library. no other scripting or js used.
following 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); } });
the problem data type let use var see 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); } });
Comments
Post a Comment