Отображение div в angularjs не работает

Question

Я хочу показать div только когда функция происходит.

Вот HTML, но он всегда показывает, я хочу, чтобы он показывался только когда функция истинна

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="!(data.hide)"> Error in triggering</div>
</div>

В контроллере у меня есть:

if(results.data=='success') {
    $scope.data = {
        show: false,
        hide: true
    }; 
    //Here I should display the success message
} else {
    //Here I should display the error message
}

Итак, как я могу показать успех div если условие и ошибка div в другом состоянии.

Примечание: если возможно, если div показывается в замедленном режиме, это будет очень полезно для меня. Как время затухания в JQuery.

Answer 1

Вы должны поддерживать только один флаг data.show этого более чем достаточно, чтобы показать скрыть div.

<div ng-controller="controller">
    <div ng-show="data.show"> Successfully triggered </div>
    <div ng-hide="data.show"> Error in triggering</div>
</div>

контроллер

app.controller('myCtrl', function(){

   ///other stuff here ..


   $scope.myFunction = function(){
       if(results.data=='success') {
          $scope.data.show = true; //success
       } else {
          $scope.data.show = false; //error
       }
    }

    //init code here
    $scope.data = { show: false }; //this should be outside your show/hide function 

})

Answer 2

Вот мой пример: Пример для show div на jsfiddle

 <div ng-app>
  <div ng-controller="showCtrl">
      <div>Show Div:
          <button ng-click="set()"></button>
        <div ng-show="showDiv"> Successfully triggered </div>
        <div ng-hide="showDiv"> Error in triggering</div>
      </div>
  </div>
</div>

Если вы хотите добавить время нарастания и затухания, я предлагаю вам взглянуть на угловую анимацию. Документация и пример для угловой анимации.

Answer 3

Я бы использовал один div что-то вроде следующего

<div ng-controller="controller">
    <div ng-show="data.show">{{data.message}}</div>
</div>

Избавьтесь от своего свойства hide для данных, которые ему не нужны, и установите текст в контроллере на другое свойство данных. Суть в том, что data.show должен быть "правдивым", чтобы div показывался. Честно говоря, если вы всегда собираетесь показывать div, я бы избавился от ng-show и просто динамически установил содержимое div в контроллере.

Answer 4

Вау, ответов уже так много, и все они правильные. Все также справедливо отметили, что для небольшой анимации вы можете использовать ngAnimate.

Мой маленький jsFiddle здесь, как забавное маленькое упражнение.

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

app.controller('testCtrl', function ($scope) {
 $scope.data = {
        show:true,
        hide: false
 }; 

$scope.go = function(checked) {
    $scope.data = {
        show:!checked,
        hide: checked
 }; 
 }

});

https://jsfiddle.net/dshun/j8wgnnm5/13/