Применить класс к родителю, если какой-либо дочерний элемент имеет определенный класс

0

У меня есть форма с несколькими разделами, и я хочу применить класс к разделу, если какие-либо поля в нем имеют определенный класс.

Моя идея состояла в том, чтобы следить за любыми полями с классом has-error в разделе и отображать значок или что-то в заголовке раздела.

Каждое поле задает свой класс с помощью ng-class="{'has-error': !value, 'has-success': value}" и похоже, что порядок обновления класса и срабатывание $watch event вопросы.

У меня setup plunkr здесь: https://plnkr.co/edit/1isq3DXXUvSPW5ChYkuM?p=preview

Попробуйте удалить и ввести значение на вход, и вы увидите, что родительский класс не синхронизирован.

Html:

  <head>
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="[email protected]" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script data-require="[email protected]" data-semver="3.3.6" src="bootstrap-js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <sws-form-section>
      <sws-form-field label="Test"></sws-form-field>
    </sws-form-section>
  </body>

</html>

JavaScript:

var module = angular.module('app', []);

module.directive('swsFormSection', function() {
    return {
      link: function($scope, element) {
        $scope.$watch(function() {
          var errors = element.find('.has-error').length;
          console.log('outer:' + errors);
          return errors;
        }, function(value) {
          $scope.hasAnyErrors = value;
        });
      },
      transclude: true,
      template: '<div><label ng-class="{\'text-danger\': hasAnyErrors, \'text-success\': !hasAnyErrors}">Errors In Section: {{hasAnyErrors}}</label><div ng-transclude></div>'
    };
  });

module.directive('swsFormField', function() {
  return {
    link: function($scope, element) {
      $scope.value = 'testar';

        $scope.$watch(function() {
          var errors = element.find('.has-error').length;
          console.log('inner:' + errors);
          return errors;
        }, function(value) {
          console.log('the value:' + $scope.value);
        });
    },
    template: '<div class="form-group" ng-class="{ \'has-error\': !value, \'has-success\': value }"><label class="control-label">Test</label><input type="text" class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>'
  }
});
  • 2
    Есть ли причина, по которой вы не используете ng-validate ? Затем вы можете просто проверить $valid в форме вместо того, чтобы наблюдать кучу имен классов ...
  • 0
    Ах, я должен окончательно разобраться в этом, спасибо. Но у меня есть несколько разделов для каждой формы, поэтому я не уверен, как мне это сделать.
Показать ещё 4 комментария
Теги:

1 ответ

1
Лучший ответ

Согласно предложению Даниэля Беккса:

мой ответ был бы "не делай этого". В общем, вам гораздо лучше в Angular, наблюдая за моделью данных, а не наблюдая за DOM.

Я решил использовать уже существующие ng-допустимые классы и каждый раздел должен быть отдельной формой, публиковать форму в области и использовать форму. $ Valid свойство в заголовке раздела.

var module = angular.module('app', []);

module.directive('swsFormSection', function() {
    return {
      transclude: true,
      template: '<form name="formSection"><i class="fa" ng-class="{ \'fa-check\': formSection.$valid, \'fa-pencil\': formSection.$invalid }"></i> My Section:<div ng-transclude></form>'
    };
  });

module.directive('swsFormField', function() {
  return {
    template: '<div class="form-group"><label class="control-label">Test</label><input type="text" required class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>'
  }
});

Обновлено plunkr: https://plnkr.co/edit/1isq3DXXUvSPW5ChYkuM?p=preview

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню