bootstrap selectpicker中的选定选项在角度JS控制器中显示为未定义

时间:2017-05-18 07:00:21

标签: javascript jquery html angularjs

单击搜索按钮时,所选项目必须显示在控制台中。但它显示“嘿未定义”。

这是我的HTML代码

<div ng-controller="filterController">
   <select name="model" id="model" multiple title="Any" data-live-search="true" style="display:none;" class="selectpicker" ng-model="select">
      <option value="1" ng-selected="true">Restaurant</option>
      <option value="2">Vegetarian</option>
      <option value="3">Bar</option>
      <option value="4">Night Life</option>
      <option value="5">Breakfast</option>
      <option value="6">Fast Food</option>
      <option value="7">Steak &amp; Grill</option>
   </select>
   <button  class="btn btn-default" style="margin-top: 25px;" ng-click="search()"></button> 
</div>

这是我的jquery代码。

$(document).ready(function($) {      
    var select = $('select');
    if (select.length > 0 ){
        select.selectpicker();
    }
    var bootstrapSelect = $('.bootstrap-select');
    var dropDownMenu = $('.dropdown-menu');
    bootstrapSelect.on('shown.bs.dropdown', function () {
        dropDownMenu.removeClass('animation-fade-out');
        dropDownMenu.addClass('animation-fade-in');
    });
    bootstrapSelect.on('hide.bs.dropdown', function () {
        dropDownMenu.removeClass('animation-fade-in');
        dropDownMenu.addClass('animation-fade-out');
    });
    bootstrapSelect.on('hidden.bs.dropdown', function () {
        var _this = $(this);
        $(_this).addClass('open');
        setTimeout(function() {
            $(_this).removeClass('open');
        }, 100);            
    });

这是我的控制器功能。

angular.module('myApp',[]).controller('filterController', function($scope) {
$scope.search = function(){
    console.log('hey',$scope.select);
}

有人可以告诉我该怎么办?

1 个答案:

答案 0 :(得分:0)

在此,您使用多个,因此您在数组中获得选定的值,因此如果您想要控制任何选定的值,那么您必须像$ scope.select [0]一样进行控制。