Question

我正在使用ng-class指令进行某种验证，但是在开始处理ng-repeat创建的元素时会出现问题。

<div class="traveler" ng-repeat="i in getNumber(travelers_count) track by $index" style="margin-top: 15px">
                        <div class="inp-wr wr-traveler">
                            <input
                                ng-class="{ 'has-error' : valError && mainForm.last_name[{{$index + 1}}].$invalid}"
                                required
                                class="text-inp"
                                style="width: 200px"
                                ng-model="$parent.last_name[$index]"
                                ng-model-options="{ updateOn: 'blur' }"
                                ng-pattern="namePattern"
                                name="last_name[{{$index + 1}}]"
                                placeholder = "Last name">
                        </div>
</div>

有没有办法让这个工作？ ng-class="{ 'has-error' : valError && mainForm.last_name[{{$index + 1}}].$invalid}"

Answer 1

您不需要括号。

mainForm.last_name[$index + 1].$invalid

Answer 2

找到快速解决方案 - 需要在<ng-form>中包装输入并检查它的有效性。即

<div class="traveler" ng-repeat="i in getNumber(travelers_count) track by $index" style="margin-top: 15px">
                            <div class="inp-wr wr-traveler">
<ng-form name="lastNameForm">
                                <input
                                    ng-class="{ 'has-error' : valError && lastNameForm.$invalid}"
                                    required
                                    class="text-inp"
                                    style="width: 200px"
                                    ng-model="$parent.last_name[$index]"
                                    ng-model-options="{ updateOn: 'blur' }"
                                    ng-pattern="namePattern"
                                    name="last_name[{{$index + 1}}]"
                                    placeholder = "Last name">
</ng-form>
                            </div>
    </div>

有条件地将类添加到动态生成的字段中

2 个答案: