Скрыть кнопку div на кнопке

Question

Я создал пользовательскую директиву, чтобы отображать сообщения об ошибках на странице. Моя директива

app.directive('errorsection', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      errors: '=errors' 
     }, 
     templateUrl: '..../shared/error-section.html' 
    }; 
}); 

ошибок section.html

<div ng-show="errors.length>0" class="error"> 
    <div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}" ng-repeat="error in errors track by $index"> 
     <button ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button> 
     <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p> 
    </div> 
</div> 

Я использовал эту директиву в одном из моей частичной страницы, чтобы показать сообщения об ошибках

<div error-section errors="errorList"></div> 

это errorList содержит 2 сообщения. Если я нажму кнопку, сообщение будет свернуто. Я хочу скрыть div, если все сообщения об ошибках рухнули. Сообщения об ошибках показываются в виде, как показано ниже формата,

 ______________ 
|error1  x| 
|error2  x| 
    _______________ 

Как я могу скрыть div, если все сообщения разрушились?

Answer 1

Вы можете проверить счетчик, чтобы сделать свою работу -

<div ng-show="errors.length>0 && clickCount !== errors.length" class="error"> 
    <div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}" 
    ng-repeat="error in errors track by $index"> 
    <button data-ng-click="clickCount = clickCount + 1" ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button> 
    <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p> </div> 

Примечание - с вашей ссылке функцию, инициализировать ClickCount в

scope.clickCount = 0; 

директива

app.directive('errorsection', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      errors: '=errors' 
     }, 
     templateUrl: '..../shared/error-section.html', 
     link : function(scope, elem, attr) { 
      scope.clickCount = 0; 
     } 
    }; 
}); 

Подводя итог -

Шаг 1 - инициализировать ClickCount на 0 в функции связи

Шаг 2 - изменить нг-если условие использовать количество кликов

Шаг 3 - изменение нг -click, чтобы увеличить кликCount

надеюсь, что это поможет.

Answer 2

Да, вы можете добиться того, что:

Сначала измените директиву как:

app.directive('errorSection', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      errors: '=errors' 
     }, 
     templateUrl: '..../shared/error-section.html', 
     link: function ($scope) { 
      $scope.$watch('errors', function (value) { 
       if (value) { 
        var count = 0; 
        angular.forEach(value, function(error) { 
         if (error.collapsed) { 
          count ++; 
         } 
        }); 

        $scope.errorsCount = value.length; 
        $scope.collapsedErrorsCount = count; 
       } else { 
        $scope.errorsCount = 0; 
        $scope.collapsedErrorsCount = 0; 
       } 
      }); 
     } 
    }; 
}); 

Теперь измените HTML как:

<div ng-show="errorsCount > 0 && errorsCount != collapsedErrorsCount" class="error"> 
    <div id="{{error.Id}}" ng-show="!error.collapsed" 
     ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}" 
     ng-repeat="error in errors track by $index"> 

     <button ng-if="error.Type=='Info'" type="button" class="close" ng-click="error.collapsed = true">× 
     </button> 

     <p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p> 
    </div> 
</div> 

Вот что происходит:

1. С вашего errors представляет собой список объектов, поэтому вместо того, чтобы вручную Складывание значения, мы используем другой ключ collapsed для тех объектов ошибок, чтобы скрыть каждый конкретный div с помощью ng-show="!error.collapsed"
2. Затем мы добавили $watch в свой список errors объекта, который будет называться когда ваши значения изменяются в объекте errors. Это будет поддерживать два счета, то есть количество общих ошибок и общее количество ошибок, которые рухнули.
3. Теперь, когда вы сворачиваете ошибку div, будет вызываться ваше выражение часов, и оба счета будут обновлены. Теперь на основе двух подсчетов, ваш родитель div будет скрыт из выражения: ng-show="errorsCount > 0 && errorsCount != collapsedErrorsCount" class="error"