html - AngularJs 验证 CSS 错误

Question

我有一个生成 3 个文本框的下面的代码。现在的问题是，当我单击其中一个文本框时，所有 3 个文本框都会获得焦点，即使它们具有不同的名称和标签值。

<div class="col-md-12" data-ng-repeat="dohPolicy in [1,2,3]">

    <div class="col-md-2" style="padding:0px; margin-right:1%;">
        <p style="font-size:11px;">P no {{dohPolicy}} </p>
    </div>
    <div class="form-group col-md-6"  
            data-ng-class='{ "has-focus": dohForm.dohPolicy.hasFocus,
                             "has-success": dohForm.dohPolicy.$valid,
                             "has-error": dohForm.dohPolicy.$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched),
                             "is-empty": !dohForm.dohPolicy.$viewValue }' 
                             style="right: 150px; bottom: 40px; padding: 0;  width:20%;">
        <label for="dohPolicy"></label>
        <input type="text" name="dohPolicy"
                    data-ng-model="dohPolicy" required readonly
                    data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                    data-ng-focus='dohForm.dohPolicy.hasFocus=true'>
        <p data-ng-show="dohForm.dohPolicy.$error.required && (dohForm.dohPolicy.$touched || submitted)"
                class="error-block">
           P Number(s)
        </p>
    </div>
</div>

尽管我也尝试使用字符串数组，但无法解决问题。我希望当我单击特定文本框时，只有该文本框应该获得焦点并突出显示。

感谢任何帮助!

谢谢

Answer 1

<input type="text" name="dohPolicy"
                                data-ng-model="dohPolicy" required readonly
                                data-ng-blur='dohForm.dohPolicy.hasFocus=false'
                                data-ng-focus='dohForm.dohPolicy.hasFocus=true' 
                                >

这里，所有动态生成的输入文本，共享相同的模型 dohPolicy。

因此，它们同时变脏并发出 blur & focus 事件。

您需要添加模型的唯一名称