У меня есть код ниже, который генерирует 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>
Хотя я также пытался использовать строковые массивы, но не смог решить проблему. Я хочу, когда я нажимаю на определенное текстовое поле, только текстовое поле должно фокусироваться и выделяться.
Любая помощь приветствуется!
благодаря
Поскольку @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>
Надеюсь, что это поможет вам..
Использовать $ index в атрибуте имени и динамически проверять
<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>
<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 model
dohPolicy.
Таким образом, all get dirty at the same time and emit the blur & focus event
они all get dirty at the same time and emit the blur & focus event
.
Вам нужно добавить уникальное имя модели