NG秀不是嵌套NG-重複

工作，我有這樣的JSON結構是這樣的：NG秀不是嵌套NG-重複

{ 
    "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-重複

首先是外循環打印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彈出只適用於外循環，不適用於內循環（更新）。

編輯：現在，當我打開從內部循環（續訂）彈出，我得到的值是外部循環（數據）的值。如何解決這個??

來源

2016-01-12 nirvair

發佈您的控制器以及如何打開彈出窗口。或者創建一個jsfiddle。 – Zaki

內循環運行...我的意思是你可以看到內循環的div？ –

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>

來源

2016-01-12 16:41:57

更好地在模型中使用對象而不是原語，並避免使用'$ parent'。嵌套的'ng-repeat'需要'$ parent。$ parent'，它在結構變化上很匆忙地變得難看 – charlietfl

是啊那就是爲什麼我說不應該使用「無因次」變量並且鏈接另一個主題:) –

@PatrickKelleter你能看到編輯過的問題嗎？ – nirvair

你必須設置包含布爾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/

來源

2016-01-12 16:47:25 bertrandg

你能看到編輯的問題嗎？ – nirvair

NG秀不是嵌套NG-重複

回答

相關問題