时间戳

首页 > 解决方案 > 在一组按钮中激活单个按钮

javascript - 在一组按钮中激活单个按钮

问题描述

我正在研究一个显示许多按钮的指令。我想只在活动按钮上调用 onclick 方法，而不是在非活动按钮上调用。

<div class="container">
  <button type="button" class="btn" ng-class="{'active': isActive}" ng-click="activeButton()">All</button>
  <button type="button" class="btn" ng-class="{'active': isActive}">Small<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">Medium<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">Large<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">SUV<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">VAN<span class="price">  $241+</span></button>
  <button type="button" class="btn" ng-class="{'active': isActive}" click="activeButton()">More</button>
</div>

app.controller('appCtrl', function ($scope) {
    $scope.isActive = false;
    $scope.activeButton = function() {
    $scope.isActive = !$scope.isActive;
  }  
});

我怎样才能做到这一点？

标签： javascripthtmlangularjs

解决方案

假设你有这个 html：

<div class="container">
    <button ng-repeat="item in buttons" type="button" class="btn" ng-class="item.isActive"
            ng-click="activeButton(item)">{{item.name}}<span class="price">  {{item.price}}</span></button>            

</div>

然后你可以在你的控制器中有这个：

$scope.buttons = [{
    name: "All",
    price: "",
    isActive: "inactive"
  }, {
    name: "Small",
    price: "$230+",
    isActive: "inactive"
  }, {
    name: "Medium",
    price: "$235+",
    isActive: "inactive"
  }, {
    name: "Large",
    price: "$237+",
    isActive: "inactive"
  }, {
    name: "SUV",
    price: "$240+",
    isActive: "inactive"
  }, {
    name: "VAN",
    price: "$241+",
    isActive: "inactive"
  }, {
    name: "More",
    price: "",
    isActive: "inactive"
  }];
  $scope.activeButton = function(item) {
      angular.forEach($scope.buttons, function(button, index) {
        if (item.name == button.name) {
          button.isActive = "active";
        } else {
          button.isActive = "inactive";
        }
      });
  }

在你的CSS中，它会像：

.active {
  background-color: yellow;
}

.inactive {
   background-color: white;
}

检查这个 plunkr。

推荐阅读