CODEWITHSUNDEEP
jqueryangularjsshow-hideangularjs-ng-click
Oam Psy
Oam Psy

Reputation: 8663

Angularjs show-hide

Im trying to re-write some of my application using angularjs.. So far i've used jQuery and made use of .show and .hide for example:

example.html

<div>
    <ul>
        <li>
            <div class="home-heading">Home</div>
        </li>
        <li>
            <div class="products-heading">Products</div>
        </li>
            <li>
            <div class="about-heading">About Us</div>
        </li>
        <li>
            <div class="contact-heading">Contact us</div>
        </li>
    </ul>
</div>

<div class="home">
    Welcome to Home
</div>

<div class="products">
    Welcome to Products
</div>

<div class="about">
    Welcome to About Us
</div>

<div class="contact">
    Welcome to Contact Us
</div>

show.js

$('.home-heading').on('click', function() {    
    $(".home").show();
    $(".products").hide();
    $(".about").hide();
    $(".contact").hide();
});

$('.products-heading').on('click', function() {    
    $(".home").hide();
    $(".products").show();
    $(".about").hide();
    $(".contact").hide();
});

$('.about-heading').on('click', function() {    
    $(".home").hide();
    $(".products").hide();
    $(".about").show();
    $(".contact").hide();
});


$('.contact-heading').on('click', function() {    
    $(".home").hide();
    $(".products").hide();
    $(".about").hide();
    $(".contact").show();
});

Adding angular to my example.html page:

<div ng-controller="TestController">
    <ul>
        <li>
            <div class="home-heading" ng-click="showHome()">Home</div>
        </li>
        <li>
            <div class="products-heading" ng-click="showProducts()">Products</div>
        </li>
            <li>
            <div class="about-heading" ng-click="showAboutUs()">About Us</div>
        </li>
        <li>
            <div class="contact-heading" ng-click="showContact()">Contact us</div>
        </li>
    </ul>
</div>

<div class="home">
    Welcome to Home
</div>

<div class="products">
    Welcome to Home
</div>

<div class="about">
    Welcome to Home
</div>

<div class="contact">
    Welcome to Home
</div>

TestController.js:

require(['app'], function(app) {
app.controller("TestController", function($scope) {     

    $scope.showHome = function()     {
        alert('showHome is responding');
    };

    $scope.showProducts = function()     {
        alert('showProducts is responding');
    };

});
});

The correct alert messages are showing on the corresponding click, however i cannot get the corresponding DIV to show/hide.

Upvotes: 0

Views: 5846

Answers (2)

thsorens
thsorens

Reputation: 1318

You can actually still use some of the same in angular. You can do something like this:

Markup

<div class="home" ng-show="ShowHomeContainer">
    Welcome to Home
</div>

JS

$scope.ShowHomeContainer = false;

$scope.showHome = function(){
    $scope.ShowHomeContainer = true;
};

Upvotes: 1

Brian Lewis
Brian Lewis

Reputation: 5729

Try this:

<body ng-app="ngAnimate">
    <div ng-init="checked=true">
    <label>
      <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
    </label>
    <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
      Visible...
    </div>
  </div>
</body>

CSS:

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.sample-show-hide.ng-hide-add.ng-hide-add-active,
.sample-show-hide.ng-hide-remove {
  opacity:0;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

You can read more here: http://docs.angularjs.org/guide/animations

Upvotes: 1

Related Questions