CODEWITHSUNDEEP
javascripthtmlangularjs
SRK
SRK

Reputation: 163

toggle and set button as active button using Angularjs

I have set of four button and I want to make them toggle and active on click of the button. Currently my buttons are get toggled on double click.

The solution what I am expecting is, when I click on the button current btn should get highlighted and data should be displayed and when I click on the next button, previous content should get hidden and current content should be visible.

Code:

(function() {
  var app = angular.module('myapp', []);

  app.controller('toggle', function($scope) {

    $scope.Ishide_bank = true;
    $scope.bank = function() {
      $scope.Ishide_bank = $scope.Ishide_bank ? false : true;
    };

    $scope.Ishide_asset = true;
    $scope.assets = function() {
      $scope.Ishide_asset = $scope.Ishide_asset ? false : true;
    };

    $scope.Ishide_address = true;
    $scope.address = function() {
      $scope.Ishide_address = $scope.Ishide_address ? false : true;
    };

    $scope.Ishide_personal = true;
    $scope.personal = function() {
      $scope.Ishide_personal = $scope.Ishide_personal ? false : true;
    };
  });
})();
<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-controller="toggle">
  <div>
    <button class="bttn" ng-click="address()">Address</button>
    <button class="bttn" ng-click="personal()">Personal-details</button>
    <button class="bttn" ng-click="bank()">Bank-Account</button>
    <button class="bttn" ng-click="assets()">Asset</button>
  </div>


  <div ng-hide="Ishide_address">
    <h1>Btn 1</h1>
  </div>
  <div ng-hide="Ishide_bank">
    <h1>Btn 2</h1>
  </div>
  <div ng-hide="Ishide_asset">
    <h1>Btn 3</h1>
  </div>
  <div ng-hide="Ishide_personal">
    <h1>Btn 4</h1>
  </div>
</body>

</html>

Plunker : https://plnkr.co/edit/8hr9zXXkgBkBZRqUjpks?p=preview

Please let me know where I am going wrong.

Upvotes: 0

Views: 2069

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

first of your script order is wrong!

angular lib should be first then custom script.js

also below is the simplest way to do what you trying to do.

(function() {
  var app = angular.module('myapp', []);
  app.controller('toggle', function($scope) {
    $scope.view = 'default';
    $scope.toggle_view = function(view) {
      $scope.view = $scope.view === view ? 'default' : view;
    };
  });
})();
.bttn {
  background: #eee;
  border: 1px solid #aaa;
}

.bttn.active {
  background: yellow;
}

.bttn:focus {
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="toggle">
    <div>
      <button class="bttn" ng-class="{'active': view === 'address'}" ng-click="toggle_view('address')">Address</button>
      <button class="bttn" ng-class="{'active': view === 'personal'}" ng-click="toggle_view('personal')">Personal-details</button>
      <button class="bttn" ng-class="{'active': view === 'bank'}" ng-click="toggle_view('bank')">Bank-Account</button>
      <button class="bttn" ng-class="{'active': view === 'asset'}" ng-click="toggle_view('asset')">Asset</button>
    </div>
    <div ng-show="view === 'address'">
      <h1>Address View</h1>
    </div>
    <div ng-show="view === 'bank'">
      <h1>Bank View</h1>
    </div>
    <div ng-show="view === 'asset'">
      <h1>Asset View</h1>
    </div>
    <div ng-show="view === 'personal'">
      <h1>Personal View</h1>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions