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

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 的第一个 block 中，我有一些选项，例如编辑和删除。单击这些后，将打开一个弹出窗口。在 ng-repeat 的第二个(内部) block 中，编辑和删除的选项相同。

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

但更好的方法是首先不要使用“无点”变量。看这里:

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>