将按钮设置为“活动”在 AngularJS 中不起作用答案

【问题标题】：Setting a button to 'active' is not working in AngularJS将按钮设置为“活动”在 AngularJS 中不起作用
【发布时间】：2016-05-04 21:23:50
【问题描述】：

在我描述的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;
    }
  }

那么我需要详细改变什么，当“Eingepasst”按钮没有更改为“Eingepasst”按钮不更改为单击时颜色为“白色”？

【问题讨论】：

标签： javascript html css angularjs sass

【解决方案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>

【讨论】：

谢谢，西蒙，这似乎可行 :-D。奖金 ;-) 问题：需要做什么才能使“Gewonnen”、“Verloren”或“Eingepasst”这三个按钮中的一个被突出显示/设置为“活动”/更改为“白色”？跨度>

【解决方案2】：

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

将此行改为

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

然后在控制器中将功能更改为

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

【讨论】：

【解决方案3】：

试试这个代码。

<button ng-click="adjusted()" ng-class="adjustedYesNo?'active':''" class="button button-outline">Eingepasst</button>

【讨论】：