1

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>
4

1 に答える 1

2

蛍光ペン機能にチェックボックスを簡単に追加できますが..

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

問題は次のとおりです。

  • 検索結果の 1 つをクリックすると、typehead.js は自動的に結果を閉じます。最初にこれをオーバーライドする必要があります。
  • 次に、選択した値をテキストフィールドにリストする必要もあります。

typehead.js github の問題ページを確認すると、問題 #254 に、少なくとも今のところ、複数選択をサポートする計画がないことが記載されています。

今、私はこれに反対票を投じるかもしれませんが、私があなただったら、他の選択肢も検討します.

それが役に立てば幸い。乾杯。

于 2014-04-04T23:17:30.783 に答える