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

Question

I am using bootstrap multiselect in my angular application. (Bootstrap 2.3)

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

I want to convert the same thing in to bootstrap typeahead but still the user can multiselect values in search results.

I am using the highlighter function of bootstrap typeahed to add check-boxes to results. I am referring to the this plnkr http://plnkr.co/edit/szO2An1oslDyGftnshyR?p=preview but I am still unable to make my code work.

Old Code for multiselect:

1. to check last selected values

    $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. to populate the multiselect

    $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. The Select box

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

Answer 1

Although you can easily add checkboxes in your highlighter function..

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>';
}

The problems are;

• typehead.js automatically closes its result after you click one of the search result. You need to override this first.
• Then you also need to list the selected values into the textfield.

If you check typehead.js github issues page, issue #254 mentioned that they don't have plan to support multi select, at least for now.

Now I might get downvoted for this, but If I were you I'll consider other alternatives as well.

• https://github.com/isteven/angular-multi-select : pure AngularJS, ability to rest selection.
• http://ivaynberg.github.io/select2/ : rich configuration options
• Or the old reliable "chosen" library (I can't post more links)

Hope it helps. Cheers.