使用Angularjs切換並將按鈕設置為活動按鈕

Question

我設置了四個按鈕，我想讓它們在單擊按鈕時切換並激活。 目前，我的按鈕在雙擊時可以切換。

我期望的解決方案是，當我單擊按鈕時， 當前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

請讓我知道我要去哪里了。

Answer 1

您的第一個腳本順序是錯誤的！

angular庫應該首先是自定義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>

使用Angularjs切換並將按鈕設置為活動按鈕

問題描述

碼：

1 個解決方案

解決方案1
1 已采納 2018-01-29 14:51:48

使用Angularjs切換並將按鈕設置為活動按鈕

問題描述

碼：

1 個解決方案

解決方案1 1 已采納 2018-01-29 14:51:48

解決方案1
1 已采納 2018-01-29 14:51:48