Как скрыть ранее выведенные ошибки в Angular?

Question

Как скрыть ранее выведенные ошибки в Angular?

Рейтинг: 0Ответов: 1Опубликовано: 24.02.2015

На странице в HTML коде есть блок вывода ошибок от запроса AJAX:

<div class="form-error" ng-bind-html="error" ng-repeat="error in response.messages" ng-show="response.type === 'error' && !deleteSuccessInfo.hidden">

<span>{{error}}</span>
</div>

После каждого сабмита кнопки старые сообщения остаются на странице, как их можно убрать или скрыть спустя некоторое время?

angularjs angularstrap

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Возможно, Вы имели в виду аналог .fadeOut:

html:

<div ng-app="myapp">
    <div ng-controller="FooController">
        <div ng-repeat="error in messages" hide="1">
            {{error}}
        </div>
    </div>
</div>

css:

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

js:

angular.module('myapp', [])
 .controller('FooController', FooController)
 .directive('hide', hide);

FooController.$inject = ['$scope'];
function FooController($scope) {
    var arr = ['foo', 'bar']; // Получили некие данные/сообщения    
    $scope.messages = arr;
}

hide.$inject = ['$timeout'];
function hide($timeout){
    return {
        restrict: 'A',
        scope: {
          delay: '=hide'
        },
        link: function ($scope, $elem) {           
            $timeout(function(){
                $elem.addClass('hidden');
            }, $scope.delay * 1000);
        }
    }
}

Смотрите результат

Как скрыть ранее выведенные ошибки в Angular?

Ответы