如何創建帶有使用引導標籤的複選框列表的下拉菜單？

Question

我發現了一些教程，以一種或另一種形式解釋這一點。大多數人不會用bootstrap來實現它，而那些往往是幾年前的。

我不確定從哪裏開始。

我的應用程序在客戶端上使用AngularJS，如果這很重要。

編輯：這是我正在談論的教程之一。 http://www.benknowscode.com/2014/09/option-picker-bootstrap-dropdown-checkbox.html

Answer 1

在這個環節，你可以找到一個工作示例：

http://codepen.io/bseth99/pen/fboKH

HTML：

<br/> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
    <div class="button-group"> 
     <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button> 
<ul class="dropdown-menu"> 
    <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li> 
    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li> 
    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li> 
    <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li> 
    <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li> 
    <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li> 
</ul> 
    </div> 
</div> 
    </div> 
</div> 

JS：

var options = []; 

$('.dropdown-menu a').on('click', function(event) { 

    var $target = $(event.currentTarget), 
     val = $target.attr('data-value'), 
     $inp = $target.find('input'), 
     idx; 

    if ((idx = options.indexOf(val)) > -1) { 
     options.splice(idx, 1); 
     setTimeout(function() { $inp.prop('checked', false) }, 0); 
    } else { 
     options.push(val); 
     setTimeout(function() { $inp.prop('checked', true) }, 0); 
    } 

    $(event.target).blur(); 

    console.log(options); 
    return false; 
});