使单个按钮在一组按钮中处于活动状态

Question

我正在处理显示许多按钮的指令。 我只想在活动按钮上调用onclick方法，而不在非活动按钮上调用。

text is [ASD
ASD
ASD
ASD





]

File has [6] errant CRLFs at the EOF

我该如何实现？

Answer 1

假设您有这个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;
}

选中this plunkr。