mrkibzk mrkibzk - 25 days ago 5
AngularJS Question

hide show elements in Angular

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!

Answer Source

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>