15054


AngularJSは、バリデーションチェックでエラー表示する事ができますが  
そのエラー表示を数秒後、自動的に非表示にする事ができるのでしょうか？

もし出来るのあれば方法を教えてください。


CC BY-SA 3.0
2015-07-31T08:29:05.597
12878
2015-08-31T04:41:23.337
2015-07-31T08:38:05.467
10417
10417
question
javascript angularjs
AngularJSのバリデーションエラーを非表示にする


AngularでDOM操作をするならカスタムディレクティブを作りましょう。  
以下は、入力が8文字を超えるとエラーを表示し、2秒後に非表示にするサンプルです。  
アニメーションにjQueryを使用しています。

[code]

    angular.module('app', [])
    .controller('formController', function($scope){
      $scope.maxlength = 8;
    })
    .directive('fadeOutMessage', function(){
      return {
        scope: {
          show: '=',
          message: '@'
        },
        template: '<div style="color:red">{{message}}</div>',
        link: function(scope, elem, attrs){
          var $div = elem.find('div');
          $div.hide();
          scope.$watch('show', function(newVal){
            if(newVal){
              $div.show()
              .delay(1000)
              .fadeOut(1000);
            }
          });
        }
      };
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    
    <body ng-app="app">
      <form name="form" ng-controller="formController">
        <p>maxlength: {{maxlength}}</p>
        <label>Your name</label>
        <input type="text" name="name" ng-maxlength="maxlength"ng-model="name" />
        <fade-out-message show="form.name.$error.maxlength" message="Too long"></fade-out-message>
      </form>
    </body>
[/code]


CC BY-SA 3.0
2015-08-30T17:07:50.037
15054
2015-08-31T04:41:23.337
2015-08-31T04:41:23.337
8532
8532
12878
answer