AngularJS类在按钮上切换

NightOwl 发表于 Dev

夜猫子

我试图在单击按钮时切换课程。IE：如果选择了按钮“ rndTotal”，则添加了“已选择”类，而其他按钮已删除了“已选择”类。我还需要这种方法来与我的控制器一起使用，因为根据选择的内容，我将发生一些事情。

到目前为止，我有：

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

更新

与其像这样直接在标记中直接设置模型值，不如使用控制器。为此，我将进行以下更改：

控制器

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。