AngularJS：引导输入与多选

Question

我在我的 Angular 应用程序中使用引导多选。 （引导程序 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/：丰富的配置选项
• 或旧的可靠“选择”库（我无法发布更多链接）

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