anglejsの異なる配列からノードを1つの配列に移動し、それを再度anglejsの親配列に移動

[！[画像の説明をここに入力してください] [1]] [1] in angularjs私はlist1、list2、list3という名前の異なる配列を持っています配列は別のリストで使用されています.2つのボタンと2つのdivがあります。divは異なる配列要素を表示します。right divは右divから要素を表示します。左divの要素をクリックし、右ボタンを押してから要素を左から削除して挿入します。 right divに移動し、右divの要素を押したときに、その要素を右divから削除し、先にその親配列から削除した左divと親配列に挿入する必要があります。anglejsの異なる配列からノードを1つの配列に移動し、それを再度anglejsの親配列に移動

html code is is ：

 <p ng-repeat="item in list1" id="attr">{{item}}</p> 
     <button id="btn-right" ng-click="add()">rig</button> 
     <button id="btn-left">left</button>

角度コードは次のとおりです。

$scope.list = ['date', 'birth']; 
    $scope.list1 = ['date', 'birth']; 
    $scope.list2 = ['date', 'birth']; 
    $scope.select=[]; 


    $scope.insert=function(item,list){ 
     attribute= item; 
    $scope. naml=list; 
     console.log(naml); 

    }; 
    $scope.add=function() 
    { 
     var index=$scope.naml.indexOf(attribute); 
     $scope.naml.splice(index, 1); 
     $scope.select.push(attribute); 
     attribute=null; 
     }

出典

2016-04-01 V Jayanth Reddy

コードにjsfiddleを追加できますか？ – Batman

私はそれを崇高に発展させました！ –

実際に私はあなたの質問を理解できません。それをはっきりと記述してください。 – Batman

あなたはこの

HTMLページのように実装できます。

<head> 
    <style type="text/css"> 
     .red { 
      color: red; 
     } 
</style> 
</head> 
<body ng-controller="MyCtrl"> 
<div style="float:left;border: solid;width: 48%;" align="center"> 
    <p ng-repeat="item in list1" ng-click="insert(item,'left'); 
toggle = !toggle" ng-class="{'red' : toggle}">{{item}}</p> 
</div> 

<div style="float:right;border: solid; width: 48%;" align="center"> 
    <p ng-repeat="item in list2" ng-click="insert(item, 'right'); 
toggle = !toggle" ng-class="{'red' : toggle}">{{item}}</p> 
</div> 

<div align="center"> 
    <button id="btn-right" ng-click="takeRight()">Right</button> 
    <button id="btn-left" ng-click="takeLeft()">Left</button> 
</div> 
</body>

Javascriptを：

$scope.list1 = ['dateleft', 'birth']; 
$scope.list2 = ['dateright', 'death']; 
$scope.itemsOnLeft=[]; 
$scope.itemsOnRight=[]; 

$scope.insert=function(item, to){ 
    switch(to) { 
     case "left": 
      var index = $scope.itemsOnLeft.indexOf(item); 
      if (index != -1) { 
       $scope.itemsOnLeft.splice(index, 1); 
      } 
      else { 
       $scope.itemsOnLeft.push(item); 
      } 

      break; 
     case "right": 
      var index = $scope.itemsOnRight.indexOf(item); 
      if (index != -1) { 
       $scope.itemsOnRight.splice(index, 1); 
      } 
      else { 
       $scope.itemsOnRight.push(item); 
      }     
      break; 
     default: 
      console.log("Error in inserting"); 
    } 
    }; 

    $scope.takeRight=function() 
    { 
     for (var i = 0; i < $scope.itemsOnLeft.length; i++) { 
      var item = $scope.itemsOnLeft[i]; 
      var index = $scope.list1.indexOf(item); 
      $scope.list1.splice(index, 1); 
      $scope.list2.push(item); 
     } 
     $scope.itemsOnLeft.length = 0;    
    }; 

    $scope.takeLeft=function() 
    { 
     for (var i = 0; i < $scope.itemsOnRight.length; i++) { 
      var item = $scope.itemsOnRight[i]; 
      var index = $scope.list2.indexOf(item); 
      $scope.list2.splice(index, 1); 
      $scope.list1.push(item); 
     } 
     $scope.itemsOnRight.length = 0; 
    };

注：使用しているので、 ng- 2つのリストを表示するために繰り返しますが、リストに重複を追加することはできません。だから、もしあなたがいくつかのアイテムを移動しようとすると、そのアイテムはすでにそのアイテムを持っていると、あなたはエラーに終わるでしょう。

ご希望のものをお探しですか？

出典

2016-04-01 09:49:37

これにplunkerまたはjsfiddleを追加できますか？ –

今、「私はそれを崇高に発展させました！：D –

私はjsのフィドルを追加したいが、私は時間がない私はそれを完了する必要があります –

angular.module("stack", []) 
 
    .controller("move", function($scope) { 
 
     // this.apps = features; 
 
     $scope.leftList = [1, 2, 3]; 
 
     $scope.rightList = [4, 5, 6]; 
 
     var left, right; 
 
     $scope.getLeft = function(item) { 
 
      left = item; 
 
     } 
 
     $scope.getRight = function(item) { 
 
      right = item; 
 
     } 
 
     $scope.ltr = function() { 
 
      console.log("left ", left); 
 
      if ($scope.leftList.length) { 
 
       $scope.leftList.forEach(function(each, index) { 
 
        if (each === left) { 
 
         $scope.leftList.splice(index, 1); 
 
        } 
 
       }); 
 
       $scope.rightList.push(left); 
 
       left = ""; 
 
      } 
 
     } 
 
     $scope.rtl = function() { 
 
      console.log("right ", right); 
 
      if ($scope.rightList.length) { 
 
       $scope.rightList.forEach(function(each, index) { 
 
        if (each === right) { 
 
         $scope.rightList.splice(index, 1); 
 
        } 
 
       }); 
 
       $scope.leftList.push(right); 
 
       right = ""; 
 
      } 
 
     } 
 
    });

.left, 
 
.right { 
 
    width: 10%; 
 
    display: inline-block; 
 
} 
 

 
.butltr, 
 
.butrtl { 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html ng-app="stack"> 
 

 
<head> 
 
    <title>stack</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> 
 

 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 

 
<body ng-controller="move"> 
 
    <div class="left"> 
 
     <div ng-repeat="item in leftList track by $index" ng-click="getLeft(item)">{{item}}</div> 
 
    </div> 
 
    <button class="butltr" ng-click="ltr()">ltr</button> 
 
    <button class="butrtl" ng-click="rtl()">rtl</button> 
 
    <div class="right"> 
 
     <div ng-repeat="item in rightList track by $index" ng-click="getRight(item)">{{item}}</div> 
 
    </div> 
 
    <script type="text/javascript" src="controller.js"></script> 
 
</body> 
 

 
</html>

私は基本的なdesign.pleaseそれをチェックして、私に知らせてくださいを追加しました。

出典

2016-04-01 10:09:06 Batman

anglejsの異なる配列からノードを1つの配列に移動し、それを再度anglejsの親配列に移動

答えて

関連する問題