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

这里，动态生成的所有输入的文本，share the same modeldohPolicy。

所以，他们all get dirty at the same time and emit the blur & focus event。

您需要添加模型

Answer 2

的唯一名称作为@Riyaj建议所有的输入控制共享同一型号& 同名，因此，所有在同一时间

控制名称变脏在表单中必须是唯一的。

您必须为每个输入控件提供不同的名称。

<form role="form" novalidate name="vm.form"> 
    <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[{{dohPolicy}}].hasFocus, 
       "has-success": dohForm.dohPolicy[{{dohPolicy}}].$valid, 
       "has-error": dohForm.dohPolicy[{{dohPolicy}}].$invalid && (dohForm.$submitted || dohForm.dohPolicy.$touched), 
       "is-empty": !dohForm.dohPolicy[{{dohPolicy}}].$viewValue }' 
       style="right: 150px; bottom: 40px; padding: 0; width:20%;"> 
      <label for="dohPolicy"> 
      </label> 
     <input 
      type="text" name="dohPolicy[{{dohPolicy}}]" 
      data-ng-model="dohPolicy" required 
      data-ng-blur='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=false' 
      data-ng-focus='dohForm.dohPolicy[{{dohPolicy}}].hasFocus=true' 
      class="form-control" 
      > 
      <p 
      data-ng-show="dohForm.dohPolicy[{{dohPolicy}}].$error.required && (dohForm.dohPolicy[{{dohPolicy}}].$touched || submitted)" 
      class="error-block">P Number(s)</p> 
     </div> 
    </div> 
</form> 

希望这将帮助你..你的名字属性

Answer 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_{{$index}}" 
     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_' + $index].$error.required && (dohForm.dohPolicy.$touched || submitted)" 
     class="error-block">P Number(s)</p> 
    </div> 

</div>