如何在箭头点击中显示下拉列表中的选定值

问题描述：

在下面的代码中，它显示了从另一个面板的下拉列表中选择的值，然后单击箭头并单击移除箭头将其推回到相同的位置面板。如何在相同的代码而不是将数据推送到面板（选定）可以将数据推送到面板内的表格？随着新数据添加到新行，每次箭头点击如何在箭头点击中显示下拉列表中的选定值

<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script> 
    <script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script> 
</head> 

<body ng-app="app" ng-controller="MoveCtrl"> 

<div class="container"> 
    <div class="panel-group"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading">Available</div> 
       <div class="panel-body"> 
        <select ng-model="availableList" multiple ng-options="x as x.name for x in available" style="width: 800px"></select> 
       </div> 
      </div> 

    <div ng-init="myVar = 'arrowBack.png'"> 
     <img ng-src="{{myVar}}" style="height: 100px" value= "add" ng-click="moveItem(availableList[0], available,selected)"> 


    <div ng-init="myVar = 'arrowForward.png'"> 
     <img ng-src="{{myVar}}" style="height: 100px" value= "remove" ng-click="moveItem(selectedList[0], selected,available)"> 
    </div> 
</div> 

      <div class="panel panel-primary"> 
       <div class="panel-heading">Selected</div> 
       <div class="panel-body"> 
       <select ng-model="selectedList" multiple ng-options="x as x.name for x in selected" style="width: 800px"> </select> 
       </div> 
      </div> 

    </div> 
</div> 

<script> 
angular.module('app', []).controller('MoveCtrl', function($scope) { 


    $scope.moveItem = function(item, from, to) { 

    console.log('Move item Item: '+item+' From:: '+from+' To:: '+to); 

     var idx=from.indexOf(item); 
     if (idx != -1) { 
      from.splice(idx, 1); 
      to.push(item);  
     } 
    }; 

$scope.selected= [];         

    $scope.available = [ 
     { 
     id: 1, 
     name: 'bar' 
     }, 
     { 
     id: 2, 
     name: 'foo' 
     }, 
     { 
     id: 3, 
     name: 'goo' 
     } 
    ]; 
    }); 
</script> 

</body> 
</html>

它就像http://jsfiddle.net/f1pnw8cq/。但不是选定的面板，我需要有表中的数据将会从现有的面板推。

你的问题是不明确的，你可以创建一个[最小的，完整的，可核查的示例]（https://stackoverflow.com/help/mcve） –

你可以参考这个http://jsfiddle.net/f1pnw8cq/ – ASM

只需用'ng-repeat'替换'ng-option'来绘制表格 –

答

updated fiddle

你需要在HTML table更换select。

<table> 
    <tr ng-repeat="x in selected"> 
     <td>{{x.name}}</td> 
    </tr> 
</table>

这将在第二个面板中添加table。

谢谢。还有一个问题 - 是否可能不是从面板获取数据并将其设置在表格上，而是从下拉列表中选择数据并设置在表格上？ http://jsfiddle.net/rv7c5x8t/ – ASM

@ASM你可以尝试像http://jsfiddle.net/f1pnw8cq/2/从'select'中删除'multiple'。 –

但它不能在自举penel中工作。 – ASM

如何在箭头点击中显示下拉列表中的选定值

相关推荐