0

ブートストラップの複数選択ウィジェットを機能させようとしています。次のように、すべてのオプションをハードコーディングすると機能します。

<select id="topic-select" multiple="multiple">
  <option val='math'>math</option>
  <option val='critical_reading'>critical reading</option>
  <option val='writing'>writing</option>
</select>



$("#topic-select").multiselect({
  includeSelectAllOption: true,
  selectAllText: 'composite score',
  allSelectedText: 'composite score',
  selectAllNumber: false,
});

しかし、次のようにオプションにangularを入力しようとすると:

<select id="topic-select" multiple="multiple" ng-option="topic in topicList">
 </select>

その後、ドロップダウンウィンドウの一種のバグが発生し、オプションが表示されません。

JavaScript を削除して複数選択にすると、すべてのオプションが表示されます。

この同様の質問を見てみました: angularjs-ng-repeat-in-bootstrap-multiselect-dropdown が、運がなかった可能性があります。

4

3 に答える 3

2

その機能を利用する場合は、Bootstrap の複数選択を実際には必要としません。オプションをドロップダウンに入力し、ng-click で新しいリストに追加することで、Angular で同じ機能を得ることができます。

    <span uib-dropdown on-toggle="toggled(open)" auto-close = "outsideClick" >
     <a class = "filter-names" href id="simple-dropdown" uib-dropdown-toggle>
       My_Dropdown<span ng-repeat="list in generated_list">{{list.genre_name}},</span><b class="caret"></b>
     </a>
     <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown" >
        Search: <input type = "text" placeholder = "search in my list" ng-model = "search.name" />
        <li ng-repeat="item in list_to_populate | filter:search" ng-class = "{true: 'filter-selected', false: ''}[item.selected == true]" ng-click="addToFilter(item)">
            {{item.name}}
        </li>
     </ul>
</span>

そしてコントローラーで：

    $scope.addToFilter = function(item) {

  if(item.selected == "undefined" || item.selected == false)
  {
    item.selected = true;
    Filters.addToFilters(item);
  }
  else
  {
    Filters.removeFromFilters(item);
    item.selected = false;
  }
}

そして最後に、このリストを保存し、関数を呼び出してどこでも使用するためのサービス「フィルター」を用意します。

于 2016-04-11T05:52:56.490 に答える
1
  1. 「ng-model」がありません。
  2. 「ng-option」ではなく「ng-options」です。

これを試して：

<select id="topic-select" multiple ng-model="selectedTopics" ng-options="topic as topic.name for topic in topicList">
</select>
于 2015-07-24T12:41:37.430 に答える
0

オプションに angular を入力する代わりに、次のようにバニラ javascript を使用して div に追加するだけです。

var topicSelect = $("#topic-select");
for (var topicId in topicList) {
  topicSelect[0].add(new Option(topicList[topicId], topicId));
}

すべてが機能するようになりました。

于 2015-08-25T19:01:43.003 に答える