使用Angularjs切换并将按钮设置为活动按钮答案

【问题标题】：toggle and set button as active button using Angularjs使用Angularjs切换并将按钮设置为活动按钮
【发布时间】：2018-07-08 06:30:52
【问题描述】：

我设置了四个按钮，我想让它们在单击按钮时切换并激活。目前我的按钮在双击时被切换。

我所期待的解决方案是，当我点击按钮 current 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>

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

请告诉我哪里出错了。

【问题讨论】：

我认为这就是您要搜索的内容：stackoverflow.com/questions/20902583/…

标签： javascript html angularjs

【解决方案1】：

你的第一个脚本顺序是错误的！

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>

【讨论】：