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>

如何简化我的代码以仅使用一个选择器而不在两个表单组中触发ng-class。并且只使用＆＃34; hasFocus＆＃34;每个小组。

预期输出

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

任何其他解决方案都会很好。

Answer 1

对于每个字段，可以使用一个变量来完成，与每次单击一个选项卡时选项卡处于活动状态的方式相同。我们只是需要在每次模糊时处理哪个项目处于活动状态。

我希望您通过ng-repeat显示所有输入字段。我创建了一个名为activeFocus的变量，它将是ng-repeat集合中的项目字段。 每次模糊事件发生时，活动项的activeFocus都将为true。

呈现代码：

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

更改焦点的功能：

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

如何在angularjs中更改具有相同选择器/标识符的特定ngClass

1 个答案: