Angularjs $parent.$索引在ng repeat中显示不正确
我有一个中继器嵌套在另一个中继器中。我需要为需要的字段创建唯一的元素名称。我正在使用$parent$.$index方法创建唯一的名称属性,但由于某些原因,它对文本框输入不起作用。我取出ng模型,将相同的命名代码分配到输入的value属性中,它正确地创建了值。我在这里做错了什么,或者我怎样才能用另一种可行的方式来做Angularjs $parent.$索引在ng repeat中显示不正确,angularjs,angularjs-ng-repeat,Angularjs,Angularjs Ng Repeat,我有一个中继器嵌套在另一个中继器中。我需要为需要的字段创建唯一的元素名称。我正在使用$parent$.$index方法创建唯一的名称属性,但由于某些原因,它对文本框输入不起作用。我取出ng模型,将相同的命名代码分配到输入的value属性中,它正确地创建了值。我在这里做错了什么,或者我怎样才能用另一种可行的方式来做 <div ng-repeat="r in model.form.rules" class="form-inline"> <fieldset>
<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>
规则{{$index+1}
或
和
如果
--选择一个字段--
等于
大于
少于
正在播放
在之前
追求
不在
是
不是
包含
不包含
开始于
以
{{'Value\'+$parent.$index+'\'+$index}}
然后
隐藏
要求
--选择一个字段--
添加规则
首先将父索引初始化为其他变量
<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>
规则{{$index+1}
或
和
如果
--选择一个字段--
等于
大于
少于
正在播放
在之前
追求
不在
是
不是
包含
不包含
开始于
以
{{'Value\'+parentIndex+'+$index}
然后
隐藏
要求
--选择一个字段--
添加规则
Wow-太棒了。刚接触angularjs,我甚至没意识到你可以这样定义随机变量。非常酷-谢谢!