Показание 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 в состоянии else.

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

Answer 1

Вы должны поддерживать только один флаг data.show, что более чем достаточно, чтобы показать hide 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

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

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

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

Answer 3

вот мой пример: Example for show div on 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> 

Если вы хотите добавить исчезать и исчезать время, я предлагаю вам взглянуть на угловой одушевленном. Documentation and example for angular animate.

Answer 4

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

My little 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/