toggle and set button as active button using Angularjs
Question
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.
1 answers
solution1
1 ACCPTED 2018-01-29 14:51:48
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.