Переключатель класса AngularJS на кнопках

Question

Я пытаюсь переключить класс при нажатии кнопки. IE: если выбрана кнопка «rndTotal», добавлен класс «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> 

По умолчанию это значение «точным», но не работает, кроме этого.

Answer 1

Это чувствует, как взломать, но сделать то, что вы после того, как вы могли бы сделать это:

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

Update

Вместо значений параметров модели непосредственно в разметке, как это, я перейдет к использованию контроллера. Для того, чтобы сделать это, я хотел бы сделать следующие изменения:

контроллера

.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 
    }; 
}); 

Markup:

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