在删除按钮时如何再次添加回相同位置angularjs

时间:2017-01-15 19:17:57

标签: html angularjs

在下面的plunkr中,点击“添加”按钮后,它会被添加到下面的范围项中,并从上面的范围项中删除。我想知道当用户从下面的范围项目中删除时,如何在删除它的同一索引点再次添加回上述范围。 plunkr链接 - https://plnkr.co/edit/EFqMKkC4wMsjYmg64n7q?p=preview

HTML -

<html>
<head>
<script src="angular.min.js"></script>

<script src="script.js"></script>
<link rel="stylesheet" href="tree.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="button">

<hr>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">SaveFilter</button>
<button type="button" class="btn btn-Default" data-dismiss="modal" data-ng-click="delete()">Delete</button>

<button ng-repeat="name in listofSystems" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" id="{{name.name}}" ng-click="addSystemsButton($event,$index)">{{name.name}}   +</button>

<hr>
<p><strong>Selected Systems</strong></p>
<button ng-repeat="name in listofSystemsAdded" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" ng-click="removeSelectedSystemsButton($index)">{{name.name}}    x</button> 

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您只需将其添加回listofSystems,就像按下“系统”时一样。

我已更新你的plunker:

  $scope.removeSelectedSystemsButton = function(ind) {
    console.log(ind);
    $scope.listofSystems.push($scope.listofSystemsAdded[ind]);
    $scope.listofSystemsAdded.splice(ind, 1)
  };
}

https://plnkr.co/edit/oeBOY1Va9LXDJUCSWaxw?p=preview