Question

我有这样的JSON结构：

{
  "products": {
    "318": {
      "id": 318,
      "product_id": 32,
      "sold_by": 1,
      "sold_from_date": 1452075077,
      "sold_to_date": 1459937477,
      "product_price": "1,200",
      "renewed_for": 0,
      "renewed": {
        "319": {
          "id": 319,
          "product_id": 32,
          "sold_by": 1,
          "sold_from_date": 1452075077,
          "sold_to_date": 1459937477,
          "product_price": "1,200",
          "renewed_for": 318
        }
      }
    }
  }
}

要打印数据，我必须循环两次ng-repeat

第一个是外部循环，用于打印318的详细信息。接下来是319，它是318的父节点。父节点是通过renewed_for索引决定的。

在ng-repeat的第一个块中，我有一些选项，如编辑和删除。单击这些后，将打开一个弹出窗口。在ng-repeat的第二个（内部）块中，编辑和删除的选项相同。

<div ng-repeat=data in products>
    <div class=edit ng-click="showEdit = true">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="showEdit = true">
        </div>
    </div>
    <div class="modal" ng-show="showEdit">
        <div class="product_price">{{data.product_price}}</div>
    </div>
</div>

showEdit弹出窗口仅适用于外部循环，而不适用于内部（续订）循环。

编辑：现在，当我从内循环（续订）打开弹出窗口时，我得到的值是外循环（数据）的值。怎么解决这个？

Answer 1

ng-repeat创建一个新范围。你必须要做

$parent.showEdit = true

在内部ng-repeat中。

但更好的方法是不使用＆＃34; undotted＆＃34;变量首先。看这里：

Why don't the AngularJS docs use a dot in the model directive?

这是一个有效的例子：

<div ng-repeat=data in products>
    <div class=edit ng-click="showEdit = true; content = data;">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="$parent.showEdit = true; $parent.content = renew;">
        </div>
    </div>
    <div class="modal" ng-show="$parent.showEdit">
        <div class="product_price">{{content.product_price}}</div>
    </div>
</div>

Answer 2

您必须在控制器内的showEdit上设置一个包含布尔$scope属性而不是布尔值的对象，如下所示：

function MyCtrl($scope) {
    $scope.dataUI = {
        showEdit: true
    };
}

<div ng-repeat=data in products>
    <div class=edit ng-click="dataUI.showEdit = true">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="dataUI.showEdit = true">
        </div>
    </div>
    <div class="modal" ng-show="dataUI.showEdit">
    //Code for edit modal
    </div>
</div>

很多帖子解释了原因： http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

ng-show不适用于嵌套的ng-repeat

2 个答案: