javascript - 将按钮设置为 'active' 在 AngularJS 中不起作用

Question

在我描述的问题旁边here ，我正在尝试一种不同的方法。

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

从我想要实现的最简单的方法开始:我想将“Eingepasst”按钮设置为事件状态，然后将变量“adjustedYesNo”更改为“true”。

这是 html 文件中的代码:

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

这是 controller.js 文件的代码:

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

这里是 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;
    }
  }

所以我必须详细更改什么，即在登陆函数时值“adjustedYesNo”为“true”(实际上“adjustedYesNo”未定义)旁边为什么“Eingepasst”按钮没有更改为单击时颜色为“白色”？

Answer 1

下面一行有不同的问题:

 <button ng-click="adjusted()" ng-class="{'active':adjusted.adjustedYesNo() == true}" class="button button-outline">Eingepasst</button>

点击时调用 adjusted() 但不传递参数，这就是 adjusteYesNo 第一次未定义的原因

要获得正确的设计，您可以调用 adjusted.adjustedYesNo() 但我不认为这是一个定义的函数。我假设您想访问 adjusteYesNo。然后我建议使用 $scope 变量来做到这一点。

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

因此您可以使用 ng-class="{'active':adjustedYesNo}" 进行设计

编辑:

要只获得一个突出显示的按钮，您可以执行类似的操作(取决于您的要求):

 <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="{'active':adjustedYesNo}" class="button button-outline">Eingepasst</button>