子要素に特定のクラスがある場合は、親にクラスを適用してください。

私はいくつかのセクションを持つフォームを持っており、その中のフィールドに特定のクラスがある場合、そのセクションにクラスを適用したいと思います。子要素に特定のクラスがある場合は、親にクラスを適用してください。

私の考えは、セクション内でhas-errorクラスのあるフィールドを監視し、セクションヘッダーにアイコンなどを表示することでした。

各フィールドのクラスはng-class="{'has-error': !value, 'has-success': value}"に設定されており、クラスが更新され、イベントの発生の原因となっているようです。

私はセットアップにここに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：ダニエル・ベックスの提案を1として

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

出典

2016-03-31 Martin Persson

あなたは 'NG-validate'を使用していない理由はありますか？あなたはクラス名の束を観察するのではなく、フォーム上で '$ valid'をチェックすることができます... –

ああ、私は確かにそれを見てください、ありがとう。しかし、私はフォームごとにいくつかのセクションがあるので、私はそれについてどうやって行くのか分かりません。 –

そして私はまだこれを解決する方法が不思議です。例えば、フォーム以外の何かのものに似たものを使用したいと思っている場合は、 –

：

私の答えは "それをしない。" になります一般的には、DOMを観察するのではなく、データモデルを観測するAngularでは、の方がはるかに良いでしょう。

既に存在する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

出典

2016-03-31 14:06:07

子要素に特定のクラスがある場合は、親にクラスを適用してください。

答えて

関連する問題