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

Question

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

成为AngularJS / Cordova / Ionic的新手我想点击＆＃34; Eingepasst＆＃34; -button时会想到不同的东西，与＃34; Gewonnen＆＃34;相比，它会有不同的逻辑。或者＆＃34; Verloren＆＃34; （见截图）。

从我想要实现的最简单的方法开始：我想在更改变量＆＃39; adjustedYesNo＆＃39;之后将＆＃34; Eingepasst＆＃34; - 按钮设置为活动状态。到了＆＃39; true＆＃39;。

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

那么我需要更详细地更改价值＆＃39; adjustYesNo＆＃39;是真的＆＃39;当登陆该功能时（实际上＆＃39;已调整但未定义），为什么＆＃34; Eingepasst＆＃34;按钮不会变为颜色＆＃39;白色＆＃39;什么时候点击？

Answer 1

以下行中存在不同的问题：

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>

获取设计

修改

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

{{1}}

Answer 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);
}

Answer 3

尝试使用此代码。

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