将按钮设置为“活动”在AngularJS中不起作用 [英] Setting a button to 'active' is not working in AngularJS

问题描述

在我先前描述的

解决方案

下面有不同的问题：

 < 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 = trueng-class ={'active'：round.won&&！adjustYesNo}class =button button-outline> Gewonnen< / button> 
< button ng-click =round.won = falseng-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& 
  

Next to the question I have described here, I am trying a different approach.

Being a newbie in AngularJS/Cordova/Ionic I want to achieve different things when having clicked the "Eingepasst"-button, which will have a different logic compared to "Gewonnen" or "Verloren" (see screenshot).

Starting with the easiest approach I want to achieve: I want to set the "Eingepasst"-button to active next to changing the variable 'adjustedYesNo' to 'true'.

This is the code from the html-file:

<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>

Here is the code of the controller.js-file:

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

And here the relevant part of the 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;
    }
  }

So what do I have to change in detail that the value 'adjustedYesNo' is being 'true' when landing in the function (in fact 'adjustedYesNo' is undefined) next to why is the "Eingepasst"-button not changing to color 'white' when having clicked?

解决方案

There are different problems in follow line:

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

On click you call adjusted() but don't pass a parameter, this is why adjusteYesNo is undefined first time

To get the right design you call adjusted.adjustedYesNo() But I don't think that this is a defined function. I assume you want to access adjusteYesNo. Then i suggest to do this with a $scope variable.

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

So you can get your design with ng-class="{'active':adjustedYesNo}"

Edit:

To get only one highlighted button you can do something like that (depends on your requirements):

 <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>

这篇关于将按钮设置为“活动”在AngularJS中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！