使用Angularjs切换并将按钮设置为活动按钮
[英]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. 我期望的解决方案是，当我单击按钮时， 当前btn应该突出显示，并且应该显示数据，而当我单击下一个按钮时，以前的内容应该被隐藏并且当前内容应该可见。
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 柱塞： https ://plnkr.co/edit/8hr9zXXkgBkBZRqUjpks ? p = preview
Please let me know where I am going wrong. 请让我知道我要去哪里了。
1 个解决方案
解决方案1
1 已采纳 2018-01-29 14:51:48
first of your script order is wrong! 您的第一个脚本顺序是错误的！
angular lib should be first then custom script.js angular库应该首先是自定义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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.