$ parent. $ Index falsch angezeigt in ng-repeat

Question

Ich habe einen Repeater in einem anderen Repeater verschachtelt. Ich muss eindeutige Elementnamen für Felder erstellen, die benötigt werden. Ich verwende die $ parent $. $ Index-Methode, um eindeutige Namensattribute zu erstellen, aber aus irgendeinem Grund funktioniert es nicht bei der Textboxeingabe. Ich habe das ng-Modell herausgezogen und dem Wertattribut der Eingabe den gleichen Namenscode zugewiesen, und der Wert wird korrekt erstellt. Was mache ich hier falsch oder wie kann ich das anders machen?

<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

Erste Init des Ausgangs-Index in andere 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>