hide show elements in Angular

Question

I have problem when I want show data. Here in example is my HTML and my JS from controller.

<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('belts')">
    <h1>Belts</h1>
</div>
<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('account')">
    <h1>Accounts</h1>
</div>
<div class="col-sm-4 text-center" ng-click="showDetails=! showDetails; showMe('lorem')">
    <h1>Lorem ipsum</h1>
</div>
<div class="row contactUs" ng-show="!showDetails">
    <div class="col-sm-4"></div>
    <div class="col-md-4 text-center">
        <h1>Didn't find what you were looking for?</h1>
        <p>Send us your question. We're here to help.</p>
        <div class="row">
            <!-- Some form go here -->
        </div>
    </div>
</div>
<div class="row showAboutUs" ng-show="showDetails">
    <div class="col-sm-12" ng-if="showBelts == true">
        <h2>Belts:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
    <div class="col-sm-12" ng-if="showAccount == true">
        <h2>Accounts:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
    <div class="col-sm-12" ng-if="showLorem == true">
        <h2>Lorem ipsum:</h2>
        <h2>Lorem ipsum dolor sit amet?</h2>
    </div>
</div>

$scope.showMe = function (item) { 
    $scope.showBelts == false; 
    $scope.showAccount == false; 
    $scope.showLorem == false; 
    if (item == 'belts') { 
        $scope.showBelts == true; 
        return $scope.showBelts; 
    } else if (item == 'account') { 
        $scope.showAccount == true;
        return $scope.showAccount; 
    } else if (item == 'lorem') { 
        $scope.showLorem == true; 
        return $scope.showLorem; 
    } 
}

When I click on some element showDetails must be true, but it must show me some element (belts, account or lorem). Thank you for help!

NIKHIL RANE · Accepted Answer · 2017-09-22 07:39:52Z

Try this may be this helps you

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    
    $scope.showMe = function(item){
       $scope.beltsShow=false;
       $scope.account=false;
       $scope.lorem=false;
       if (item=='belts'){
           $scope.beltsShow=true;
       }else if (item=='account'){
           $scope.account=true;
       }else if (item=='lorem'){
           $scope.lorem=true;
       }
    }
    
    $scope.showMe('');
}

h3 {margin:0px;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="col-sm-4 text-center" ng-click="showMe('belts')">
   <h3>Belts</h3>
</div>
<div class="col-sm-4 text-center" ng-click="showMe('account')">
   <h3>Accounts</h3>
</div>
<div class="col-sm-4 text-center" ng-click="showMe('lorem')">
   <h3>Lorem ipsum</h3>
</div>
<div class="row">
   <div class="col-sm-4"></div>
   <div class="col-md-4 text-center">
      <h3>Didn't find what you were looking for?</h3>
      <p>Send us your question. We're here to help.</p>
      <div class="row">
         <!-- Some form go here -->
      </div>
   </div>
</div>
<div class="row">
   <div class="col-sm-12" ng-show="beltsShow">
      <h2>Belts:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
   <div class="col-sm-12" ng-show="account">
      <h2>Accounts:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
   <div class="col-sm-12" ng-show="lorem">
      <h2>Lorem ipsum:</h2>
      <h2>Lorem ipsum dolor sit amet?</h2>
   </div>
</div>

Sibiraj · Accepted Answer · 2017-09-22 08:32:10Z

You could simply do

JS

$scope.showMe = function (item) { 
   $scope.item = item;
}

HTML

<div class="col-sm-12" ng-if="item == 'belts'">
    <h2>Belts:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>
<div class="col-sm-12" ng-if="item == 'account'">
    <h2>Accounts:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>
<div class="col-sm-12" ng-if="item == 'lorem'">
    <h2>Lorem ipsum:</h2>
    <h2>Lorem ipsum dolor sit amet?</h2>
</div>

Collectives™ on Stack Overflow

hide show elements in Angular

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related