AngularJS：具有多选的Bootstrap typeahead

Question

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

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

我想将同样的东西转换为bootstrap typeahead，但用户仍然可以在搜索结果中多选数值。

我使用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/：丰富的配置选项
• 或旧的可靠＆＃34;选择＆＃34;图书馆（我无法发布更多链接）

希望它有所帮助。欢呼声。