Showing div in angularjs not working

Question

I want to show a div only when the function happens.

Here is the HTML, but it is always showing, I want it to show only when the function is true

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

In the controller I have:

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
}

So, How can I show the success div in if condition and error div in the else condition.

Note : If possible if the div is shown in slow motion it will be very helpful for me. Like the fade timing in jQuery.

Pankaj Parkar · Accepted Answer · 2015-07-03T19:55:20.970

0

You should only maintain only one flag data.show that is more than sufficient to 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>

Controller

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 

})

edited Jul 03 '15 at 19:55

answered Jul 03 '15 at 19:23

Pankaj Parkar

134,766
23
234
299

If i want to show the successfully triggered text, then should i do like this ? `$scope.data = { show: true, hide: false };` ? – Jul 03 '15 at 19:25
Or may i know what should i do to show and hide it in success and failure condition ? – Jul 03 '15 at 19:26
@Preethi you should only care about doing true false for `$scope.data = { show: true}` – Pankaj Parkar Jul 03 '15 at 19:28
@pankar : By default the `Successfully triggered` is visible, when i try to do `$scope.data = { show: true}` the message was the same and no actions was there .. :( – Jul 03 '15 at 19:32
Yes, i am trying it.. Actually i have this in the app.js first line `function controller($scope) { $scope.data = { show: true, hide: false }; }` Is that araise any problem ? – Jul 03 '15 at 19:42
Because without the above code, i am getting errors in my console when the page is render itself – Jul 03 '15 at 19:43
I have this error when i try the updated code ... after the button press `Cannot set property 'show' of undefined` – Jul 03 '15 at 19:46
@Preethi read my 1st line carefully you should write `$scope.data = { show: false };` line in you controller somewhere,,and then you need to use `if(results.data=='success') { $scope.data.show = true; //success } else { $scope.data.show = false; //error }` in your function – Pankaj Parkar Jul 03 '15 at 19:50
sorry, when i put this `$scope.data = { show: false };` at the first line of the controller, it shows me this error `Error: [ng:areq] http://errors.angularjs.org/1.2.16/ng/areq?p0=controller&p1=not%20aNaNunction%2C%20got%20undefined at Error (native)` and displaying both the div elements in the html page – Jul 03 '15 at 19:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82333/discussion-between-preethi-and-pankajparkar). – Jul 03 '15 at 19:57
Hi, another help, can you help me pls http://stackoverflow.com/questions/31218982/post-not-working-as-expected-in-angularjs i already posted it in my friend account, i will accept that. but can you help me in this pls.... – Jul 04 '15 at 09:16

score 0 · Answer 2 · answered Jul 03 '15 at 19:28

0

I would use one div something like the following

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

Get rid of your hide property on data it isn't needed and set your text in the controller on another data property. The bottom line is data.show has to be "truthy" for the div to show up. Honestly, if you are always going to show a div I would get rid of ng-show and just dynamically set the div content in the controller.

answered Jul 03 '15 at 19:28

Shawn

869
1
9
27

Can't i use without `{{` because i am using laravel which will have conflict with that.. – Jul 03 '15 at 19:33
To get around the handlebars maybe take a look at ng-if directive? – Shawn Jul 03 '15 at 20:24

Shaohao · Answer 3 · 2015-07-03T20:14:46.570

here is my example: 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>

If you want to add fade in and fade out timing, I suggest you to look up angular animate. Documentation and example for angular animate.

score 0 · Answer 4 · answered Jul 03 '15 at 20:49

wow, there are already so many answers, and they are all correct. Everybody also rightly pointed out that to have a little animation, you can use ngAnimate.

My little jsFiddle is here, just as a fun little exercise.

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/

Showing div in angularjs not working

4 Answers4