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>

我需要做的是设置为父元素添加一个类，此处为<div class="form-group">，当输入具有焦点时，并在字段失去焦点时将其删除。

我知道如何在jQuery中执行此操作，但不是以Angular方式执行此操作。我有许多表单字段需要像这样，所以我试图避免设置变量并使用ng-class寻找变量。我宁愿通过某种方式让字段对其父级进行简单操作，我可以在每个表单字段中使用相同的方法。

Answer 1

如果你需要做的只是操纵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);
         });
      }
    }
});

Answer 2

您可以执行此操作

    <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是一个布尔属性。因此，根据其状态，您可以使用该表达式<div class="form-group">

管理{{focusIsSet ? 'is-focused': ''}}中的类

您可以使用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'之类的内容。

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

2 个答案: