在 ng-click 上将元素从另一个 ng-repeat 推送到 ng-repeat

Question

我有两个 ng-repeat，我需要将一个 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 个选项来将项目添加到另一个数组：

I think when you have full item, you don't need to $index instead index send the item completely.

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>

在 ng-click 上将元素从另一个 ng-repeat 推送到 ng-repeat

Push element to a ng-repeat from another ng-repeat on ng-click

html

javascript

angularjs

angularjs-ng-repeat