この設定では、AngularJS変数の値は

Question

です。クリック後に完全に表示されるリストを実装したいと思います。 しかし、私がng-clickに値を設定しようとすると、valueスコープはクリックされた要素上にしかありません。

<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、すべてng-repeatアイテムには、それぞれ独自の有効範囲があります。これは、data-ng-click="showIataList = true"が特定のスコープで動作し、メイン$scopeでは動作しない理由です。

あなたは、たとえば書くことができます。

$scope.data.showIataList = false; 

、すべてが

---

か、あなたのケースで動作します：<ul data-ng-init="data.showIataList = false">

Fiddle Demo

Answer 2

問題をbこのタグのecause。内部にng-ifがあるので、新しいスコープが作成され、親スコープからデータが継承されます。

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

あなたshowIataListもngIfにコピーされるようにngIfが親から継承するため。

parentScope.showIataList = ngIf.showIataList 

しかし、あなたがリンクをクリックした後、ngIf.showIataListはあなたがngIfの内部を見るなぜ、showIataListが真実であることに変化はなくshowIataListがあるので、その変化は）（（parentScope.showIataListにプリミティブな値を伝播しません

されているが、parentScopeでそれは偽のまま。

は

あなたはこのようなオブジェクトに移動showIataListでそれを修正することができます。

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