在ng-click上將元素從另一個ng-repeat推到ng-repeat

Question

我有兩個ng-repeats，我需要將一個ng-repeat的值添加到另一個，然后反之亦然，我的html如下所示：

<div id="external-events">
  <div ng-repeat = "selected in selectedcolumn">
    <div class="external-event bg-green" ng-mouseover="open = true" ng-mouseleave="open = false" > <i class="fa fa-question"></i>{{selected}}
      <i class="pull-right fa fa-remove"  type="button" ng-show="open" style="height: 5px;" ></i>
    </div>
  </div>
</div>

<div id="external-events">
  <div ng-repeat = "item in columnnames">
    <div class="external-event bg-yellow" ng-mouseover="open1 = true" ng-mouseleave="open1 = false" ><i class="fa fa-question"></i>{{item}}
      <i class="pull-right fa fa-plus"  type="button" ng-show="open1" ng-click="addSelectedColumn($index)" style="height: 5px;" ></i>

    </div>
  </div>
</div>

我現在唯一的想法就是這樣的：

$scope.columnnames=[
       "brandname",
        "category",
        "type",
        "description"
      ];

      $scope.selectedcolumn=[
         "memberID",
      ];

      $scope.addSelectedColumn = function($index){

           $scope.selectedcolumn.push($scope.columnnames.$index);

      }

我該怎么做？ 謝謝

Answer 1

使用此刷新ng-repeat

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

$ scope。$ apply（）;

$scope.columnnames = [
    "brandname",
    "category",
    "type",
    "description"
];

$scope.selectedcolumn = [
    "memberID",
];

$scope.addSelectedColumn = function ($index) {
    $scope.selectedcolumn.push($scope.columnnames[$index]);
    $scope.columnnames.remove($scope.columnnames[$index]);
    $scope.apply() 
}

Answer 2

嘗試這個

$scope.columnnames = [
    "brandname",
    "category",
    "type",
    "description"
];

$scope.selectedcolumn = [
    "memberID",
];

$scope.addSelectedColumn = function ($index) {
    $scope.selectedcolumn.push($scope.columnnames[$index]);
    //$scope.apply() // uncomment if view is not updating
}

Answer 3

您也可以這樣做，我設置了2個用於將項目添加到另一個數組的選項：

我認為當您有完整的項目時，您不需要$index而是將索引完全發送給項目 。

 var app = angular.module("app", []); app.controller("ctrl", function($scope) { $scope.columnnames = [ "brandname", "category", "type", "description" ]; $scope.selectedcolumn = [ "memberID" ]; $scope.selectedcolumn2 = []; $scope.addSelectedColumn = function(item) { $scope.selectedcolumn.push(item); var exist = $scope.selectedcolumn2.indexOf(item); if (exist === -1) { $scope.selectedcolumn2.push(item); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container" ng-app="app" ng-controller="ctrl"> <div class="row"> <div class="col"> <h3>items</h3> <ul class="list-group"> <li class="list-group-item" ng-repeat="item in columnnames"> <div class="external-event bg-yellow" ng-mouseover="open1 = true" ng-mouseleave="open1 = false"> <i class="fa fa-question"></i>{{item}} <i class="pull-right fa fa-plus" type="button" ng-show="open1" ng-click="addSelectedColumn(item)" style="height: 5px;"></i> </div> </li> </ul> </div> <div class="col"> <h3>allow repeat items</h3> <ul class="list-group"> <li class="list-group-item" ng-repeat="selected in selectedcolumn track by $index"> <div class="external-event bg-green" ng-mouseover="open = true" ng-mouseleave="open = false"> <i class="fa fa-question"></i>{{selected}} <i class="pull-right fa fa-remove" type="button" ng-show="open" style="height: 5px;"></i> </div> </li> </ul> </div> <div class="col"> <h3>not allow repeat items</h3> <ul class="list-group"> <li class="list-group-item" ng-repeat="selected in selectedcolumn2"> <div class="external-event bg-green" ng-mouseover="open = true" ng-mouseleave="open = false"> <i class="fa fa-question"></i>{{selected}} <i class="pull-right fa fa-remove" type="button" ng-show="open" style="height: 5px;"></i> </div> </li> </ul> </div> </div> </div>