Question

CSS

<style> 
    .focused{ 
     border: 1px solid red; 
    } 
</style> 

HTML

<div class="form-group" ng-class="{focused: hasFocus}"> 
    <input type="text" ng-focus="hasFocus = true" ng-blur='hasFocus = false'> 
</div> 
<br><br> 
<div class="form-group" ng-class="{focused: hasFocusOther}"> 
    <input type="text" ng-focus="hasFocusOther = true" ng-blur='hasFocusOther = false'> 
</div> 

Wie kann ich meinen Code vereinfachen ändern, dass nur ein Selektor zu verwenden, ohne ng-Klasse sowohl in der Form auslösenden -Gruppe. und verwende nur "hasFocus" für jede Gruppe.

erwartete Ausgabe

<div class="form-group" ng-class="{focused: hasFocus}"> 
    <input type="text" ng-focus="hasFocus = true" ng-blur='hasFocus = false'> 
</div> 
<br><br> 
<div class="form-group" ng-class="{focused: hasFocus}"> 
    <input type="text" ng-focus="hasFocus= true" ng-blur='hasFocus= false'> 
</div> 

jede andere Lösung wäre schön.

Answer 1

Es kann mit einer Variablen für jedes Feld genauso gemacht werden wie die Art, wie die Registerkarte bei jedem Klick auf eine Registerkarte aktiv ist. Wir müssen nur behandeln, welches Element jedes Mal aktiv ist, wenn eines unscharf ist.

Ich erwarte, dass Sie alle Eingabefelder durch ng-repeat anzeigen. Ich habe eine Variable namens activeFocus erstellt, die ein Elementfeld in der Sammlung von ng-repeat sein wird. Jedes Mal, wenn ein Unschärfeereignis eintritt, ist activeFocus des aktiven Elements wahr.

-Code für die Darstellung:

<div ng-repeat="item in listItem" class="form-group" ng-class="{focused: item.activeFocus}"> 
    <input type="text" ng-focus="item.activeFocus" ng-blur='changeFocus(item)'> 
</div> 

Funktion für den Wandel Fokus:

$scope.changeFocus = function(itemActive){ 
    // deactive all except item 
    listItem = listItem.map(function(item){ 
     // activeFocus == true when item == itemActive 
     item.activeFocus = item == itemActive; 
     return item; 
    }) 
}