2017-02-20 83 views
0

什么我现在:我表现出JSON在选择中的选项,这与插件bootstrap-duallistbox的帮助下它显示在一个双列表的形式内容用了某些可以添加或删除选定的选项。与引导双列表框的问题

我的问题:什么失败,是选择一个选项,并把它传递到下一个区域时,把所有不只是一个,我不知道会发生什么,我希望他们能帮助我,我离开了前进我拿here

回答

0

,而不是使用Jquery双重列表框,您可以使用该指令为angularJs在这里https://github.com/frapontillo/angular-bootstrap-duallistbox下载zip并与bower安装它,如果你没有风扇bower你可以改变在scriptcss文件的路径此代码如下:

<!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文件中,您必须重新定义路径。