Cant gesetzt AngularJS Variable in ng-reapeat

Question

Ich möchte Liste implementieren, die nur nach dem Klick vollständig sichtbar sein sollte. Wenn ich jedoch versuche, den Wert ng-click zu setzen, ist der Wertbereich nur in einem angeklickten Element.

<ul data-ng-init="showIataList = false"> 
    {{showIataList}} <-- always false :(but should be true after click on link from list 
    <li data-ng-repeat="value in data.departureIataList"> 
    <a href="javascript:" 
     data-ng-if="$index < 3 || showIataList"> 
     {{value}} 
    </a> 
    {{showIataList}} 
    <a href="javascript:" 
     data-ng-if="!showIataList && $index == 3" 
     data-ng-click="showIataList = true"> 
     {{showIataList}} <-- after click is true, but true should be and on the top showIataList variable 
    </a> 
    </li> 
</ul> 

Answer 1

FYI, jeder ng-repeat Artikel hat seinen eigenen Umfang. Dies ist ein Grund, warum data-ng-click="showIataList = true" für einen bestimmten Bereich und nicht Haupt $scope funktioniert.

Sie zum Beispiel schreiben:

$scope.data.showIataList = false; 

und alles

---

oder in Ihrem Fall arbeiten: <ul data-ng-init="data.showIataList = false">

Fiddle Demo

Answer 2

Das Problem ist, b wegen dieses Tags. Es hat ng-if innerhalb, also erstellt es einen neuen Bereich und erbt Daten vom übergeordneten Bereich.

<a href="javascript:" 
    data-ng-if="!showIataList && $index == 3" 
    data-ng-click="showIataList = true"> 

Da ngIf erben von den Eltern so Ihre showIataList auch ngIf kopiert wird.

parentScope.showIataList = ngIf.showIataList 

Aber nachdem Sie auf den Link klicken, ngIf.showIataList geändert wird, aber diese Änderung wird propagieren nicht zu parentScope.showIataList (weil showIataList ist (Grundwert)

, warum Sie sehen innerhalb ngIf ist showIataList wahr, aber in parentScope es bleibt falsch.

Sie es wie folgt durch Bewegung showIataList in ein Objekt beheben.

<ul data-ng-init="iataList = {isShow:false}"> 
    {{iataList.isShow}} 
    <li data-ng-repeat="value in data.departureIataList"> 
    <a href="javascript:" 
     data-ng-if="$index < 3 || iataList.isShow"> 
     {{value}} 
    </a> 
    {{showIataList}} 
    <a href="javascript:" 
     data-ng-if="!iataList.isShow&& $index == 3" 
     data-ng-click="iataList.isShow= true"> 
     {{iataList.isShow}} 
    </a> 
    </li> 
</ul>