Bootstrap 双列表框的问题答案

【问题标题】：Problems with Bootstrap Dual List BoxBootstrap 双列表框的问题
【发布时间】：2017-02-20 22:27:49
【问题描述】：

我现在拥有的：我在选项中显示JSON 的内容，在插件bootstrap-duallistbox 的帮助下以双重列表的形式显示它通过它可以添加或删除某些选定的选项。

我的问题：什么失败是什么时候选择一个选项并将它传递给下一个区域拉动所有而不只是一个，我不知道要期待什么，我希望他们能帮助我，我留下我接受的预付款here

【问题讨论】：

您在 plunkr 中的代码不起作用。它只显示一个空白页面。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

而不是使用Jquery 双列表框，您可以在这里使用angularJs 的指令https://github.com/frapontillo/angular-bootstrap-duallistbox 下载zip 并使用bower 安装它，如果您不喜欢bower，您可以更改路径以下代码中的script 和css 文件：

<!doctype html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AngularJS Bootstrap Duallistbox example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
 <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="../bower_components/bootstrap-duallistbox/src/bootstrap-duallistbox.css">
 </head>
 <body ng-app="bsDuallistboxApp">

 <!--[if lt IE 9]>
  <script src="../bower_components/es5-shim/es5-shim.js"></script>
  <script src="../bower_components/json3/lib/json3.min.js"></script>
 <![endif]-->

 <div class="container" ng-controller="MainCtrl">
  <select
          ng-model="model"
          ng-options="obj as obj.text for obj in list track by obj.id"
          multiple
          bs-duallistbox
          bootstrap2="{{ settings.bootstrap2 }}"

          move-on-select="{{ settings.moveOnSelect }}"
          preserve-selection="{{ settings.preserveSelection }}"

          move-selected-label="{{ settings.moveSelectedLabel }}"
          move-all-label="{{ settings.moveAllLabel }}"
          remove-selected-label="{{ settings.removeSelectedLabel }}"
          remove-all-label="{{ settings.removeAllLabel }}"

          non-selected-list-label="{{ settings.nonSelectedListLabel }}"
          selected-list-label="{{ settings.selectedListLabel }}"

          postfix="{{ settings.postfix }}"
          select-min-height="{{ settings.selectMinHeight }}"

          filter="{{ settings.filter }}"
          filter-values="{{ settings.filterValues }}"
          filter-non-selected="settings.filterNonSelected"
          filter-selected="settings.filterSelected"
          filter-placeholder="{{ settings.filterPlaceholder }}"
          filter-clear="{{ settings.filterClear }}"
          info-all="{{ settings.infoAll }}"
          info-filtered="{{ settings.infoFiltered }}"
          info-empty="{{ settings.infoEmpty }}"

  </select>
  <div class="row">
    <button class="btn btn-large" ng-click="reset()">Reset</button>
    <button class="btn btn-large" ng-click="add()">Add</button>
  </div>
 </div>

 <script src="../jquery/jquery.js"></script>
 <script src="../angular/angular.js"></script>
 <script src="../bootstrap-duallistbox/src/jquery.bootstrap-duallistbox.js">   </script>
 <script src="../common/module.js"></script>
 <script src="../bootstrap/dist/js/bootstrap.js"></script>
 <script src="../src/directives/bsDuallistbox.js"></script>

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>

所有文件都包含在 zip 文件中，您只需重新定义路径即可。

【讨论】：