Question

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

我希望两种数据都不同。如何使用ng-repeat管理不同的范围变量？

Answer 1

方法很简单，您只需要为每个div使用不同的范围变量。在打开data list项目的功能中，您需要创建mydatalist变量的副本，而不是使用它。检查下一个代码段，它确实可以帮助您解决问题：

＆＃13;

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;

  };

}]);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何使用Scope变量基于索引？

1 个答案: