$parent.$index 在 ng-repeat 中显示不正确

Question

我有一个中继器嵌套在另一个中继器中。我需要为我需要的字段创建唯一的元素名称。我正在使用 $parent$.$index 方法来创建唯一的名称属性，但由于某种原因，它不适用于文本框输入。我取出 ng-model 并将相同的命名代码分配给输入的值属性，它正确地创建了值。我在这里做错了什么或者我怎样才能以不同的方式做到这一点。

<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

首先将父索引初始化为其他变量

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

$parent.$index 在 ng-repeat 中显示不正确

$parent.$index displaying incorrectly in ng-repeat

angularjs

angularjs-ng-repeat