我有四个按钮，我想让它们在单击按钮时切换并激活。目前我的按钮可以通过双击进行切换。
我期望的解决方案是，当我单击按钮当前btn时，应突出显示并显示数据，当我单击下一个按钮时，以前的内容应隐藏并显示为当前内容内容应该是可见的。
代码:
(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>笨蛋:https://plnkr.co/edit/8hr9zXXkgBkBZRqUjpks?p=preview
请让我知道我哪里出错了。
最佳答案
你的第一个脚本顺序是错误的!
angular lib 应该首先出现，然后是自定义 script.js
下面也是执行您尝试执行的操作的最简单方法。
(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>关于javascript - 使用 Angularjs 切换按钮并将其设置为事件按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48503342/