2017-08-16 10 views
0

下のコードでは、矢印のクリック時に別のパネルのドロップダウンリストから選択した値を表示し、矢印をクリックすると、パネル。同じコードで、パネル(選択)にデータをプッシュするのではなく、パネル内のテーブルにデータをプッシュできますか?新しいデータが新しい行に追加して、毎回の矢印は、それは私がそこにテーブルを必要とするデータが利用できるパネルからプッシュされます.But代わりに選択したパネルのhttp://jsfiddle.net/f1pnw8cq/のように動作します矢印のクリック時の表のドロップダウンリストの選択値の表示方法

<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> 

をクリックします。あなたがHTMLでtableselectを交換する必要が

+0

あなたの質問は明確ではありません。[最小限の完全で検証可能な例](https://stackoverflow.com/help/mcve) –

+0

を作成できますか?このhttp://jsfiddle.net/f1pnw8cq/を参照してください。 – ASM

+0

'ng-option'を' ng-repeat'に置き換えてテーブル –

答えて

1

updated fiddle

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

これは、第2パネルにtableを追加します。

+0

ありがとう。もう1つの質問 - パネルからデータを取得してテーブルに設定する代わりに、ドロップダウンリストからデータを選択し、テーブルに設定することが可能ですか? http://jsfiddle.net/rv7c5x8t/ – ASM

+0

@ASM http://jsfiddle.net/f1pnw8cq/2/のようなものを試して、 'select'から' multiple'を削除することができます。 –

+0

しかし、それはブートストラップペネルでは機能しません。 – ASM

関連する問題