如何在索引上使用示波器变量基础

Question

在AngularJS中，一个范围变量分配给ng-repeat。我有多个div，单击event function。当我单击第一个div时，它的数据将使用mydatalist范围变量使用ng-repeat显示。之后，如果我单击另一个div，则调用相同的功能，并且在第二个div中使用不同的data.display初始化相同的范围变量。删除了第一个div的效果和数据，并填充了第二个div数据。

我希望两个数据都不同。如何使用NG重复管理不同的范围变量？

Answer 1

该方法很容易，您只需要为每个div使用其他范围变量。在打开data list项目的功能中，您需要创建mydatalist变量的副本而不是使用它。检查下一个片段，它肯定会给您解决问题的想法：

var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function($scope) {
  var mydatalist = ["Subitem 1", "Subitem 2", "Subitem 3"];
  $scope.datos = [
    {value: "Item 1", items: []},
    {value: "Item 2", items: []},
    {value: "Item 3", items: []},
    {value: "Item 4", items: []},
    {value: "Item 5", items: []}
  ];
  $scope.openItem = function(item) {
    if (item.open) {
      item.items = [];
    } else {
      item.items = angular.copy(mydatalist);
    }
    item.open = !item.open;
  };
}]);

.item {
  background: #FFF;
  border: 1px solid #CCC;
  font: normal 14px Arial;
  line-height: 25px;
  text-indent: 10px;
}
.item:nth-last-child(n + 2) {
  border-bottom: none;
}
.subitem {
  background: #EEE;
  border-top: 1px solid #CCC;
  line-height: 25px;
  text-indent: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <div ng-repeat="item in datos" class="item">
      <div ng-click="openItem(item)">{{item.value}} ({{item.open ? "open" : "close"}})</div>
      <div ng-show="item.items.length > 0">
        <div ng-repeat="subitem in item.items" class="subitem">
          {{subitem}}
        </div>
      </div>
    </div>
  </div>
</div>