javascript - 使用 AngularJS 和 CSS 选择按钮并不完全有效

Question

作为 AngularJS/Cordova/Ionic 的新手，我希望在单击“Eingepasst”按钮时实现不同的事情，与“Gewonnen”或“Verloren”相比，它具有不同的逻辑。

在另一个线程的帮助下，我现在只能选择“Gewonnen”或“Verloren”或“Eingepasst”之一(见屏幕截图)。但是，当单击“Eingepasst”时，我无法再单击“Gewonnen”或“Verloren”。

这是 HTML 代码:

<div class="padding">
    <div class="button-bar">
        <button ng-click="round.won=true" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button>
        <button ng-click="round.won=false" ng-class="{'active': !round.won && !adjustedYesNo}" class="button button-outline">Verloren</button>
        <button ng-click="adjusted()" ng-class="adjustedYesNo?'active':''" class="button button-outline">Eingepasst</button>
    </div>
</div>

这是 CSS 文件的相关部分:

.button {

  border-radius: 10px;

  &.button-light {
    color: $ci-green;
  }

  &.button-outline {
    @include regular;

    color: $ci-white;
    border-color: $ci-white;

    &.activated {
      background-color: rgba($ci-white, .1);
      border-color: $ci-white;
    }

    &.active {
      border-color: $ci-white;
      background-color: $ci-white;
      color: $ci-green;
    }
  }

最后是 Javascript 代码:

$scope.adjusted = function (adjustedYesNo) 
{
    $scope.adjustedYesNo = adjustedYesNo;
    console.log("adjusted before: ", $scope.adjustedYesNo);
    $scope.adjustedYesNo = true;
    console.log("adjusted afterwards: ", $scope.adjustedYesNo);
    return $scope.adjustedYesNo;
}    

那么这里需要做什么呢？

Answer 1

<div class="padding">
    <div class="button-bar">
        <button ng-click="round.won=true; adjustedYesNo=false" ng-class="{'active':round.won && !adjustedYesNo}" class="button button-outline">Gewonnen</button>
        <button ng-click="round.won=false; adjustedYesNo=false" ng-class="{'active': !round.won && !adjustedYesNo}" class="button button-outline">Verloren</button>
        <button ng-click="adjusted()" ng-class="adjustedYesNo?'active':''" class="button button-outline">Eingepasst</button>
    </div>
</div>

试试这个。您需要将 adjustedYesNo 设置为 false 以显示 Gewonnen 或 Verloren 的 active 类。