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/ ：豐富的配置選項
• 或舊的可靠的“選擇”庫（我無法發布更多鏈接）

希望能幫助到你。 干杯。