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>

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

请让我知道我哪里出错。

Answer 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>

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

代码：

1 个答案: