如何在箭頭點擊中顯示下拉列表中的選定值

在下面的代碼中，它顯示了從另一個面板的下拉列表中選擇的值，然後單擊箭頭並單擊移除箭頭將其推回到相同的位置面板。如何在相同的代碼而不是將數據推送到面板（選定）可以將數據推送到面板內的表格？隨着新數據添加到新行，每次箭頭點擊如何在箭頭點擊中顯示下拉列表中的選定值

<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/。但不是選定的面板，我需要有表中的數據將會從現有的面板推。

來源

2017-08-16 ASM

你的問題是不明確的，你可以創建一個[最小的，完整的，可覈查的示例]（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。

來源

2017-08-17 06:03:15

謝謝。還有一個問題 - 是否可能不是從面板獲取數據並將其設置在表格上，而是從下拉列表中選擇數據並設置在表格上？ http://jsfiddle.net/rv7c5x8t/ – ASM

@ASM你可以嘗試像http://jsfiddle.net/f1pnw8cq/2/從'select'中刪除'multiple'。 –

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

如何在箭頭點擊中顯示下拉列表中的選定值

回答

相關問題