javascript - Angular : Bootstrap typeahead with multiselect

Question

我在我的 Angular 应用程序中使用 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/ : 丰富的配置选项
• 或者旧的可靠的“选择”库(我不能发布更多链接)

希望对您有所帮助。干杯。