css - 如何在angularjs中使用相同的选择器/标识符更改特定的ngClass

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。并且只对每个组使用“hasFocus”。

预期输出

<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 都将为真。

渲染代码:

<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;
   })
}