AngularJS类打开按钮

我试图在单击按钮时切换一个类。IE：如果选择了“rndTotal”按钮，则会添加“selected”类，而其他按钮会删除“selected”类。我还需要这种方法来与我的控制器一起工作，比如，我将根据所选内容进行处理

到目前为止，我已经：

      <div class="row optionRow" ng-init="option = 'exact'" >
        <div class="col">
          <button ng-class="{selected:option=='exact'}">Exact</button>
        </div>
        <div class="col">
          <button ng-class="{selected:option=='rndTip'}">Round Tip</button>
        </div>
        <div class="col">
          <button ng-class="{selected:option=='rndTotal'}">Round Total</button>
        </div>
      </div>

准确的
圆头
整数总数

---

它默认为“精确”，但除此之外不起作用。

这感觉像是一次黑客攻击，但要完成您所追求的目标，您可以这样做：

<div class="row optionRow" ng-init="option = 'exact'" >
    <div class="col">
        <button ng-class="{selected:option=='exact'}" ng-click="option='exact'">Exact</button>
    </div>
    <div class="col">
        <button ng-class="{selected:option=='rndTip'}" ng-click="option='rndTip'">Round Tip</button>
    </div>
    <div class="col">
        <button ng-class="{selected:option=='rndTotal'}" ng-click="option='rndTotal'">Round Total</button>
    </div>
</div>

标记：

准确的
圆头
整数总数

select（$index）在做什么？目前……什么都没有。我试图找出什么是最好的方法，然后在我的控制器参考。不回答问题，但正是你需要的。（如果您想在项目中包含另一个依赖项，当然可以）。例如，您可以尝试将select（$index）替换为select（'exact'），然后使用$scope.select将参数（'exact'）分配给变量$scope.option。这一参数的可能重复项似乎可以很好地工作。你能解释一下为什么你（1）认为它有黑客行为，以及（2）为什么这个解决方案能奏效吗？我对Angular非常陌生，所以我正在尝试找出最好的方法来做事情。我不喜欢像这样直接在标记中设置模型值。我更喜欢用控制器来做这样的事情。我会更新我的答案，告诉你我将如何处理这个问题。这太完美了。感谢您的解释和提供您喜欢的方法。@nc45我刚刚意识到我没有解释为什么第一个答案有效。使用

ng init=“option='exact'”

时，将隐式创建名为

option

的模型属性。我利用了这一点，直接在每个按钮的

ng click

事件中设置该模型属性的值。希望这是有道理的。

.controller('myController', function() {
    var vm = this;
    vm.selectedOption = 'exact';
    vm.selectOption = function(option) {
        vm.selectedOption = option;
        // do anything else you may need to do when the selected option changes
    };
});

<div ng-controller="myController as vm">
    <div class="row optionRow">
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='exact'}" ng-click="vm.selectOption('exact')">Exact</button>
        </div>
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='rndTip'}" ng-click="vm.selectOption('rndTip')">Round Tip</button>
        </div>
        <div class="col">
            <button ng-class="{selected:vm.selectedOption==='rndTotal'}" ng-click="vm.selectOption('rndTotal')">Round Total</button>
        </div>
    </div>
</div>