AngularJS 将 class 应用于事件的父元素？

Question

我有一个表单域：

<div class="form-group">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="abc.setFocus('name')" required>
</div>

我需要做的是设置添加一个 class 到父元素，在这里 <div class="form-group">，当输入有焦点时，当字段失去焦点时删除它。

我知道如何在 jQuery 中执行此操作，但不会在 Angular 中执行此操作。我有很多表单字段需要像这样，所以我试图避免设置变量并使用 ng-class 查找它。我宁愿有一些方法让字段简单地作用于它的父级，我可以在每个表单字段中使用相同的方法。

Answer 1

你可以执行这个

    <div class="form-group {{focusIsSet ? 'is-focused': ''}}">
      <label>Name</label>
      <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="focusIsSet = true" ng-blur="focusIsSet = false" required>
    </div>

其中 $scope.focusIsSet 一个布尔值属性。因此，取决于它的状态，您可以使用该表达式 {{focusIsSet ? 'is-focused': ''}}

在 <div class="form-group"> 中管理类

您可以使用 ng-focus 和 ng-blur 指令更改它

更新

我认为您可以用这种方式保持每个输入的状态

<div class="form-group {{checkFocusState('abc.user.name') ? 'is-focused': ''}}">
  <label>Name</label>
  <input type="text" name="name" class="form-control" ng-model="abc.user.name" ng-focus="setFocus('abc.user.name')" ng-blur="setBlur('abc.user.name')" required>
</div>
</div>

JS代码

  var inputsFocusState = {};


  $scope.checkFocusState = function(propertyPathName) {

      if(inputsFocusState[propertyPathName] == true) {
         return true;
      }

      return false

  }

  $scope.setBlur = function(propertyPathName) {
         inputsFocusState[propertyPathName] = false;
  }

  $scope.setFocus = function(propertyPathName) {
         inputsFocusState[propertyPathName] = true;
  }

否则，您可以为 html 模板中的每个输入创建每个焦点属性

P.S。 ng-class也是不错的选择

P.S.S 我有类似的情况，但是表格是完全动态的。

所以我将每个属性拆分为 user.name = {value: 'john', buttons: [...], label: 'Name', //and much more} 这样的对象。

最好将 'user.name.path' 更改为 'user-name-path'。

Answer 2

指令可能是最简单的通用方法，如果您需要做的只是操纵 dom。

<div class="form-group" focus-class="focused">
  <label>Name</label>
  <input name="name" class="form-control" ng-model="abc.user.name" required>
</div>

JS

angular.module('myApp').directive('focusClass', function(){
    return {
      link:function(scope, elem, attrs){
         elem.find('input').on('focus', function(){
            elem.toggleClass(attrs.focusClass);
         }).on('blur', function(){
            elem.toggleClass(attrs.focusClass);
         });
      }
    }
});

AngularJS 将 class 应用于事件的父元素？

AngularJS apply class to parent element on event?

javascript

jquery

angularjs

ng-class