angularjsangularjs-ng-repeatangular-ngmodelangularjs-ng-show

Accessibility of $index in ng-show


I try displaying a select when the previous select was checked.

<div ng-repeat="item in collection">

<div ng-show="$index === 0 || $parent.list[$index].nom">
    <select ng-model="$parent.list[$index].nom" ng-options="..."></select>
</div>
  1. <div ng-repeat="item in collection">

I loop through collection and I create many selects that there are item in collection.

  1. <div ng-show="$index === 0 || $parent.list[$index].nom">

I want to display/hide the parent div of selects with two conditions :

  1. I show the div if the index is equal to 0 (for display first select)
  2. I show the div if the current ngModel contains the nom
  1. <select ng-model="$parent.list[$index].nom" ng-options="...">

I put a dynamic ngModel where each select has his own model like :

exemple of ngModel
(source: noelshack.com)

Test Exemple : I have three options in a select, so I want give opportunity to member to choose each option of the select.

If the member choose an option of select 1 the seconde select show on and If he select an option of second select the third select show on but no more else...

THE PROBLEME HERE : $index in the directive ngShow seem's known with this condition :

$index === 0

but no here :

$parent.list[$index].nom

Solution

  • I think it should be:

    <div ng-show="$index === 0 || $parent.list[$index - 1].nom">
        <select ng-model="$parent.list[$index].nom" ng-options="el for el in els"></select>
    </div>
    

    Note, that you want to refer previous item in the list, hence $index - 1.