$ parent. $ Index affiché incorrectement dans ng-repeat

Question

J'ai un répéteur imbriqué dans un autre répéteur. Je dois créer des noms d'éléments uniques pour les champs dont j'ai besoin. J'utilise la méthode $ parent $. $ Index pour créer des attributs de nom uniques, mais pour une raison quelconque, cela ne fonctionne pas dans l'entrée textbox. J'ai sorti le modèle ng et assigné le même code de nommage dans l'attribut de valeur de l'entrée et il crée la valeur correctement. Qu'est-ce que je fais mal ici ou comment puis-je faire cela d'une manière différente qui fonctionne.

<div ng-repeat="r in model.form.rules" class="form-inline"> 
    <fieldset> 
     <legend> 
      <span class="pull-right"> 
       <button class="btn btn-default btn-xs" ng-click="model.copyRule(r)"><span class="fa fa-copy"></span></button> 
       <button class="btn btn-danger btn-xs" ng-click="model.deleteRule(r)"><span class="fa fa-remove"></span></button> 
      </span> 
      Rule {{$index + 1}} 
     </legend> 
     <div ng-repeat="c in r.conditions"> 
      <div class="form-group" ng-show="$index > 0"> 
       <select class="form-control" ng-model="r.conjunction"> 
        <option>or</option> 
        <option>and</option> 
       </select> 
      </div> 
      <div class="input-group" ng-class="{ 'has-error': (rulesForm['ConditionField_' + $parent.$index + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['ConditionField_' + $parent.$index + '_' + $index].$invalid && !rulesForm['ConditionField_' + $parent.$index + '_' + $index].$pristine && rulesForm['ConditionField_' + $parent.$index + '_' + $index].$touched) }"> 
       <span class="input-group-addon">IF</span> 
       <select class="form-control" name="{{'ConditionField_' + $parent.$index + '_' + $index}}" ng-model="c.field" ng-options="f.label for f in model.form.fields" required> 
        <option value="">-- Select a Field --</option> 
       </select> 
      </div> 
      <span ng-switch="c.field.type"> 
       <select class="form-control" ng-model="c.numberCondition" ng-switch-when="number"> 
        <option>is equal to</option> 
        <option>is greater than</option> 
        <option>is less than</option> 
       </select> 
       <select class="form-control" ng-model="c.dateCondition" ng-switch-when="date"> 
        <option>is on</option> 
        <option>is before</option> 
        <option>is after</option> 
        <option>is not on</option> 
       </select> 
       <select class="form-control" ng-model="c.condition" ng-switch-default> 
        <option>is</option> 
        <option>is not</option> 
        <option>contains</option> 
        <option>does not contain</option> 
        <option>begins with</option> 
        <option>ends with</option> 
       </select> 
      </span> 
      <span ng-switch="c.field.type"> 
       <span ng-class="{ 'has-error': (rulesForm['NumberValue_' + $parent.$index + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['NumberValue_' + $parent.$index + '_' + $index].$invalid && !rulesForm['NumberValue_' + $parent.$index + '_' + $index].$pristine && rulesForm['NumberValue_' + $parent.$index + '_' + $index].$touched) }"> 
        <input type="number" class="form-control" name="{{'NumberValue_' + $parent.$index + '_' + $index}}" ng-switch-when="number" required /> 
       </span> 
       <span ng-class="{ 'has-error': (rulesForm['DataValue_' + $parent.$index + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['DataValue_' + $parent.$index + '_' + $index].$invalid && !rulesForm['DataValue_' + $parent.$index + '_' + $index].$pristine && rulesForm['DataValue_' + $parent.$index + '_' + $index].$touched) }"> 
        <input type="date" class="form-control" name="{{'DataValue_' + $parent.$index + '_' + $index}}" ng-switch-when="date" required /> 
       </span> 
       <span ng-class="{ 'has-error': (rulesForm['Value_' + $parent.$index + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['Value_' + $parent.$index + '_' + $index].$invalid && !rulesForm['Value_' + $parent.$index + '_' + $index].$pristine && rulesForm['Value_' + $parent.$index + '_' + $index].$touched) }"> 
        {{'Value_' + $parent.$index + '_' + $index}}<input type="text" class="form-control" name="{{'Value_' + $parent.$index + '_' + $index}}" ng-switch-default required value="{{'Value_' + $parent.$index + '_' + $index}}" /> 
       </span> 
      </span> 
      <button class="btn btn-default" ng-click="model.addCondition(r)" ng-show="$index == 0"><span class="fa fa-plus"></span></button> 
      <button class="btn btn-danger" ng-click="model.deleteCondition(r, c)" ng-show="$index > 0"><span class="fa fa-remove"></span></button> 
      <br /><br /> 
     </div> 
     <div class="input-group"> 
      <span class="input-group-addon">THEN</span> 
      <select class="form-control" ng-model="r.action"> 
       <option value="hide">hide</option> 
       <option value="require">require</option> 
      </select> 
     </div> 
     <span ng-class="{ 'has-error': (rulesForm['ActionField_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['ActionField_' + $index].$invalid && !rulesForm['ActionField_' + $index].$pristine && rulesForm['ActionField_' + $index].$touched) }"> 
      <select class="form-control" name="{{'ActionField_' + $index}}" ng-model="r.field" ng-options="f.label for f in model.form.fields" required> 
       <option value="">-- Select a Field --</option> 
      </select> 
     </span> 
     <br /><br /> 
    </fieldset> 
</div> 
<div class="form-group"> 
    <button type="button" ng-click="model.addRule()" class="btn btn-default">Add Rule</button> 
</div> 

Answer 1

premier Init l'indice parent dans une autre variable

<div ng-repeat="r in model.form.rules" class="form-inline" ng-init="parentIndex = $index"> 
      <fieldset> 
       <legend> 
        <span class="pull-right"> 
         <button class="btn btn-default btn-xs" ng-click="model.copyRule(r)"><span class="fa fa-copy"></span></button> 
         <button class="btn btn-danger btn-xs" ng-click="model.deleteRule(r)"><span class="fa fa-remove"></span></button> 
        </span> 
        Rule {{$index + 1}} 
       </legend> 
       <div ng-repeat="c in r.conditions"> 
        <div class="form-group" ng-show="$index > 0"> 
         <select class="form-control" ng-model="r.conjunction"> 
          <option>or</option> 
          <option>and</option> 
         </select> 
        </div> 
        <div class="input-group" ng-class="{ 'has-error': (rulesForm['ConditionField_' + parentIndex + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['ConditionField_' + parentIndex + '_' + $index].$invalid && !rulesForm['ConditionField_' + parentIndex + '_' + $index].$pristine && rulesForm['ConditionField_' + parentIndex + '_' + $index].$touched) }"> 
         <span class="input-group-addon">IF</span> 
         <select class="form-control" name="{{'ConditionField_' + parentIndex + '_' + $index}}" ng-model="c.field" ng-options="f.label for f in model.form.fields" required> 
          <option value="">-- Select a Field --</option> 
         </select> 
        </div> 
        <span ng-switch="c.field.type"> 
         <select class="form-control" ng-model="c.numberCondition" ng-switch-when="number"> 
          <option>is equal to</option> 
          <option>is greater than</option> 
          <option>is less than</option> 
         </select> 
         <select class="form-control" ng-model="c.dateCondition" ng-switch-when="date"> 
          <option>is on</option> 
          <option>is before</option> 
          <option>is after</option> 
          <option>is not on</option> 
         </select> 
         <select class="form-control" ng-model="c.condition" ng-switch-default> 
          <option>is</option> 
          <option>is not</option> 
          <option>contains</option> 
          <option>does not contain</option> 
          <option>begins with</option> 
          <option>ends with</option> 
         </select> 
        </span> 
        <span ng-switch="c.field.type"> 
         <span ng-class="{ 'has-error': (rulesForm['NumberValue_' + parentIndex + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['NumberValue_' + parentIndex + '_' + $index].$invalid && !rulesForm['NumberValue_' + parentIndex + '_' + $index].$pristine && rulesForm['NumberValue_' + parentIndex + '_' + $index].$touched) }"> 
          <input type="number" class="form-control" name="{{'NumberValue_' + parentIndex + '_' + $index}}" ng-switch-when="number" required /> 
         </span> 
         <span ng-class="{ 'has-error': (rulesForm['DataValue_' + parentIndex + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['DataValue_' + parentIndex + '_' + $index].$invalid && !rulesForm['DataValue_' + parentIndex + '_' + $index].$pristine && rulesForm['DataValue_' + parentIndex + '_' + $index].$touched) }"> 
          <input type="date" class="form-control" name="{{'DataValue_' + parentIndex + '_' + $index}}" ng-switch-when="date" required /> 
         </span> 
         <span ng-class="{ 'has-error': (rulesForm['Value_' + parentIndex + '_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['Value_' + parentIndex + '_' + $index].$invalid && !rulesForm['Value_' + parentIndex + '_' + $index].$pristine && rulesForm['Value_' + parentIndex + '_' + $index].$touched) }"> 
          {{'Value_' + parentIndex + '_' + $index}}<input type="text" class="form-control" name="{{'Value_' + parentIndex + '_' + $index}}" ng-switch-default required value="{{'Value_' + parentIndex + '_' + $index}}" /> 
         </span> 
        </span> 
        <button class="btn btn-default" ng-click="model.addCondition(r)" ng-show="$index == 0"><span class="fa fa-plus"></span></button> 
        <button class="btn btn-danger" ng-click="model.deleteCondition(r, c)" ng-show="$index > 0"><span class="fa fa-remove"></span></button> 
        <br /><br /> 
       </div> 
       <div class="input-group"> 
        <span class="input-group-addon">THEN</span> 
        <select class="form-control" ng-model="r.action"> 
         <option value="hide">hide</option> 
         <option value="require">require</option> 
        </select> 
       </div> 
       <span ng-class="{ 'has-error': (rulesForm['ActionField_' + $index].$invalid && rulesForm.$submitted) || (rulesForm['ActionField_' + $index].$invalid && !rulesForm['ActionField_' + $index].$pristine && rulesForm['ActionField_' + $index].$touched) }"> 
        <select class="form-control" name="{{'ActionField_' + $index}}" ng-model="r.field" ng-options="f.label for f in model.form.fields" required> 
         <option value="">-- Select a Field --</option> 
        </select> 
       </span> 
       <br /><br /> 
      </fieldset> 
     </div> 
     <div class="form-group"> 
      <button type="button" ng-click="model.addRule()" class="btn btn-default">Add Rule</button> 
     </div>