AngularJSとCSSでボタンを選択しても全く動作しない

Question

AngularJS/Cordova/Ionicで初心者になる "Eingepasst"ボタンをクリックすると、 "Gewonnen"とは違ったロジックを持つことができます。または "Verloren"。

別のスレッドで助けられているので、私は今、 "Gewonnen"または "Verloren"または "Eingepasst"（スクリーンショット参照）のうち1つだけを選択できます。しかし、 "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> 

これを試してみてください。 GewonnenまたはVerlorenのクラスactiveを表示するには、adjustedYesNoをfalseに設定する必要があります。