AngularJS：使用多重选择预先输入Bootstrap

Question

我在我的角度应用程序中使用bootstrap multiselect。 （引导程序2.3）

http://davidstutz.github.io/bootstrap-multiselect/index-2-3.html#examples

我想将相同的内容转换为提前引导，但用户仍然可以在搜索结果中多选值。

我正在使用bootstrap typeahed的荧光笔功能将复选框添加到结果中。 我指的是这个plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview，但是我仍然无法使我的代码正常工作。

多选的旧代码：

1. 检查最后选择的值

    $scope.selectOptions = function () { var index = fetching the index of checked values; var selectedAttrFound = index>-1; if (selectedAttrFound == true) { angular.element("#attr-value-selector") .multiselect('select', $scope.filterAttributes[index].attributeValues); } }; 

2. 填充多选

    $scope.attrValuesWidget = angular.element("#attr-value-selector") .multiselect({ numberDisplayed: 2, enableFiltering: true, maxHeight: "300", onChange: function (element, checked) { $scope.attributeActionValue = { attribute: $scope.attributeSelected, value: element.val(), checked: checked }; $scope.$apply(); } }) .multiselect('dataprovider', $scope.configAttributeValuesList); 

3. 选择框

    <select id='attr-value-selector' multiple='multiple' ></select> 

Answer 1

尽管您可以轻松地在荧光笔功能中添加复选框。

highlighter: function( item ){
    var bond = bondObjs[ item ];              
    return '<div class="bond">'
            +'<input type="checkbox" class="mightBeRequiredToCollectTheSelectedResult">' 
            +'<img src="' + bond.photo + '" />'
            +'<br/><strong>' + bond.name + '</strong>'
            +'</div>';
}

问题是；

• 单击搜索结果之一后，typehead.js会自动关闭其结果。 您需要先覆盖它。
• 然后，您还需要将选定的值列出到文本字段中。

如果您查看typehead.js github问题页面，则问题254提到他们至少暂时没有计划支持多选。

现在，我可能对此表示不满，但是如果我是您，我也会考虑其他选择。

• https://github.com/isteven/angular-multi-select ：纯AngularJS，能够进行选择。
• http://ivaynberg.github.io/select2/ ：丰富的配置选项
• 或旧的可靠的“选择”库（我无法发布更多链接）

希望能帮助到你。 干杯。