AngularJS class toggle on buttons

Question

Ich versuche eine Klasse zu wechseln, wenn auf eine Schaltfläche geklickt wird. IE: Wenn die Schaltfläche "rndTotal" ausgewählt ist, wird die Klasse "selected" hinzugefügt und die anderen Schaltflächen entfernen die Klasse "selected". Ich brauche diesen Ansatz auch, um mit meinem Controller zu arbeiten, da ich, je nachdem, was ausgewählt wird, Dinge passieren lassen werde.

Bisher habe ich:

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

Der Standardwert ist ‚genau‘, aber nicht andere Funktion als das.

Answer 1

Das fühlt sich an wie ein Hack, aber zu erreichen, was Sie sind, nachdem Sie dies tun könnte:

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

aktualisieren

Statt Modellwerte direkt in das Markup wie dies der Einstellung I würde zur Verwendung eines Controllers bewegen. Um das zu tun, dass ich folgende Änderungen vornehmen:

-Controller

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