将元素从ng-click上的另一个ng重复中推入ng重复

Question

我有两个ng repeats，我需要将ng repeat的值添加到另一个ng repeat，然后是VICE，反之亦然，我的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

尝试此

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

用它来刷新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 3

您也可以这样做，我将2个选项设置为将项目添加到另一个数组：

我认为当您有完整的项目时，您不需要$index而不是索引发送 item 完全。

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>