Çocuk ng-tekrarından ebeveyn ng-tekrarının erişim endeksi


218

Alt listenin (foos.bars) işlev çağrısına bağımsız değişken olarak üst listenin (foos) dizinini kullanmak istiyorum.

Birinin $ parent. $ Dizinini kullanmanızı önerdiği ancak $indexbir özelliği olmadığı bir yazı buldum $parent.

Ebeveynin dizinine nasıl erişebilirim ng-repeat?

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

2
Benim için doğru çalışıyor gibi görünüyor. Çalıştığını göstermek için bir dalgıç yazdım: plnkr.co/edit/BenCDh4NUGPPHKWGsGMr?p=preview Daha fazla ayrıntı verebilir misiniz?
Piran

Bunun için teşekkür ederim. Sorunumun işaretlememde bir hata olduğunu bulmamı sağladı.
Kodlayıcı1

@ Coder1, lütfen bu soruyu silmeyi düşünün.
Mark Rajcok

7
@MarkRajcok Dün gece düşündüm, ama bunu nasıl yapacağını arayan başkalarına yardımcı olacağını düşündüm, bu yüzden bıraktım.
Coder1

2
Tutmak istiyorsanız, lütfen bir yanıt ekleyin ve kabul edin (bu nedenle bu soru "cevapsız" listesinde kalmaz).
Mark Rajcok

Yanıtlar:


279

Örnek kodum doğruydu ve sorun gerçek kodumda başka bir şeydi. Yine de, bunun örneklerini bulmanın zor olduğunu biliyorum, bu yüzden başka birinin bakması durumunda cevap veriyorum.

<div ng-repeat="f in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething($parent.$index)">Add Something</a>
    </div>
  </div>
</div>

13
Ayrıca - bu beni bir süre fırlattı. Kodunuzda bir veri ng-switch yönergesi varsa, ek kapsam seviyesine ($ parent. $ Parent. $ İndex) çıkmanız gerekir. Güzel değil, biliyorum.
Hairgami_Master

Kabul. Doğru değeri almak için denetleyici işlevime $ parent. $ Parent. $ Dizinini geçmem gerekiyordu ama sonra ng-show'umu $ parent. $ Dizinine bağladım. Bana açısal bir hata gibi görünüyor
Andrew Gray

? Ben ng-tekrarı ile birlikte bir Koleksiyonu tekrarı varsa ben Anlaşılan o ki aynı şeyi tanımsız döndürülüyor böyle bir şey yapabilir
Ali Sadiq

6
Sadece eklemek için - ng-ifyeni öğrendiğim gibi kodda olsa bile ek bir $ ebeveyn gerekir .
Plasty Grove

@PlastyGrove Gerekli ng-ifve ek $parentreferansa işaret ettiğiniz için teşekkür ederiz . Bana biraz baş ağrısı kurtardı.
iiminov

219

Http://docs.angularjs.org/api/ng.directive:ngRepeat ng-repeat belgelerine göre , anahtarı veya dizi dizinini istediğiniz değişkene kaydedebilirsiniz.(indexVar, valueVar) in values

böylece yazabilirsin

<div ng-repeat="(fIndex, f) in foos">
  <div>
    <div ng-repeat="b in foos.bars">
      <a ng-click="addSomething(fIndex)">Add Something</a>
    </div>
  </div>
</div>

Bir seviye yukarı $ parent. $ Endeksi ile hala oldukça temiz ama birkaç ebeveyn kadar, işler dağınık olabilir.

Not: $indexher kapsamda tanımlanmaya devam edecek, onun yerine geçmeyecektir fIndex.


Notu anlamıyorum. Bu sorunun asıl amacı bu değil, çünkü bu doğru değil mi?
adam-beck

16
O daha temizdir gibi bu valide cevap olmalı $parent.$indexbiri
tdebroc

1
@ adam-beck Bence bu (fIndex, f)yöntemi kullanırken , $ endeksi hala tanımlanacaktır (atlanmadı) - böylece indeks hem olarak erişilebilir olur $indexve fIndex.
Samuel Jaeschke

1
Benim durumum için, kullanmak $indexişe yaramaz, ancak ekler fIndex. Neden $index işe yaramıyor tek bir ipucu yok (benim kod başka yerlerde yapar), ama birkaç gün için mücadele ettikten sonra ben bu cevabı buldum ben bakım durdu. Birden fazla ng-repeats IMO'nuz olduğunda da biraz daha okunabilir .
Krøllebølle

@ Krøllebølle, gördüğünüz şekilde çalışmasının nedeni, her ng-repeatyinelemenin $index, ebeveynin üzerine yazarak kendi tanımını yapan kendi kapsamını oluşturmasıdır $index. {{$index}}En içteki ng-repeatöğenin üstüne veya altına bir sağ eklerseniz, üst öğenin değerini görürsünüz ve bunu en içteki ng-repeatöğenin içine yerleştirmeniz çocuğun değerini gösterir. Bu yanıttaki yaklaşımı kullanmak, üst dizini adını seçtiğiniz bir değişkene atar ( fIndex), alt kapsam tarafından üzerine yazılmaz.
tavnab

44

Benzer bir soruya verdiğim cevaba bir göz atın .
Takma adlandırarak $indexdeli gibi şeyler yazmak zorunda değiliz $parent.$parent.$index.


Ng-init$parent.$index kullanarak çok daha şık bir çözüm :

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info


3
ayrıca daha güvenli! döngünün içine bir ng-if eklerseniz, $ endeksinin dağınık hale gelmesini sağlayın
gonzalon

SectionIndex = $ parent. $ İndex
Beanwah

Tekrar dizisindeki bir öğeyi silerseniz değişken güncellenmez. $ endeksi ve $ parent. $ endeksi her zaman güvenli seçimdir
Bharath Bhandarkar

12

Aşağıdaki kodla büyük ana dizinin denetimini de alabilirsiniz

$parent.$parent.$index

1
Bu, projem için iyi çalışıyor. Harika bir çözüm sunduğunuz için teşekkür ederiz!
Canet Robern

Görünüşe göre bu genişletilemez.
Ganesh Vellanki

Ne yazık ki, bu bir şekilde kıskançlık ve açıkça sorunlu birçok vaka örneğidir.
ChiefTwoPencils

2

Use $ parent. $ İndex kullanabilirsiniz. Burada üst öğe, üst öğe yinelenen nesnenin nesnesini temsil edecektir.


0

$ parent, birden fazla ebeveyn varsa çalışmaz. bunun yerine init içinde bir üst dizin değişkeni tanımlayabilir ve kullanabiliriz

<div data-ng-init="parentIndex = $index" ng-repeat="f in foos">
  <div>
    <div data-ng-init="childIndex = $index" ng-repeat="b in foos.bars">
      <a ng-click="addSomething(parentIndex)">Add Something</a>
    </div>
  </div>
</div>

burada vucalur'un cevabına da değiniyor. Genel olarak bu IMO'ya gitmek için doğru yoldur ve genellikle ng-init için uygun kullanımdır. İnsanlar $ ebeveyn değerine ulaştığında, kodunuzun içeriği değiştiğinde sorun istiyorsunuz.
shaunhusain
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.