Question

我有一系列使用ng-repeat显示的按钮。按钮代表一组旋转问题的答案。如果他们单击正确的答案按钮，我会更改按钮的样式并禁用它。所有这一切都很好。但是，当我尝试允许用户点击＆＃34;重置＆＃34;按钮，它运行ng-init函数来重置所有变量值，等等，样式不是更新或刷新，而是保持相同的状态。请参阅代码段：

HTML：

<div class="container" ng-app="MyApp" ng-controller="MyCtrl" ng-init="init()">
  <div>
    <div class="timer">
      Timer: <span ng-bind="counter"></span>
    </div>
    <br>
    <span>
      <button class="btn btn-lg btn-primary" ng-click="startCountdown()" ng-disabled="quizStart">Start</button>
      <button class="btn btn-lg btn-primary" ng-click="init()">Reset</button>
    </span>
  </div>
  <br>
  <fieldset ng-disabled="counterStop">
    <div ng-show='quizStart' ng-disabled="counterStop">
      <h3> {[{ question }]}: </h3>
      <br><br>
      <span class="child" ng-repeat="choice in choices">
        <button class="btn btn-lg btn-info my-btn" ng-click="clickThis($event, choice)"> {[{ choice }]} </button>
      </span>
    </div>
  </fieldset>
</div>

控制器：

var app = angular.module('MyApp', []);

var MyCtrl = function($scope, $timeout) {
  $scope.init = function() {    
    $scope.counter = 10;
    $scope.counterStop = true;
    $scope.quizStart = false;
    $scope.questionNum = 0;
    $scope.questions = [
      ['Here is question 1',
        [],
        {
          answer1: false,
          answer6: false
        }
      ],
      ['Here is question 2',
        [],
        {
          answer4: false,
          answer2: false
        }
      ],
      ['Here is question 3',
        [],
        {
          answer3: false,
          answer5: false
        }
      ]
    ];

    // set initial question and choices
    $scope.question = $scope.questions[$scope.questionNum][0];
    $scope.choices =     ['answer1','answer2','answer3','answer4','answer5','answer6'];

  }

  countdown = function() {
    $scope.counter--;

    if (!$scope.counterStop && $scope.counter > 0) {
       $timeout(countdown,1000);
     } else if ($scope.counter === 0) {
       $scope.counterDone = true;
       $scope.counterStop = true;
     }

   };

  $scope.startCountdown = function() {
    $scope.counterStop = false;
    $scope.quizStart = true;
    $timeout(countdown, 1000);
  };

   $scope.checkAnswerStatus = function() {

    for (var value in $scope.questions[$scope.questionNum][2]) {
      if ($scope.questions[$scope.questionNum][2][value] === false) return false;
    }
    return true;
  }

  $scope.clickThis = function(event, answer) {
    var correctAnswer = false;
    for (var value in $scope.questions[$scope.questionNum][2]) {
      if (answer === value) {
        $scope.rightAnswers += 1;
        element = angular.element(event.target);
        element.css({'color': 'white', 'background-color': 'green'});
        element.prop('disabled', true);
        $scope.questions[$scope.questionNum][2][value] = true;
        correctAnswer = true;
      }
    }

    if (correctAnswer === false) {
      $scope.wrongAnswers += 1;
      element = angular.element(event.target);
      element.css({'color': 'white', 'background-color': 'red'});
    }

    if ($scope.checkAnswerStatus()) {
      // make sure to check if there are any more questions, and if not, elegantly end
      if ($scope.questionNum === $scope.questions.length-1) {
        $scope.counterStop = true;
      }
      else {
        $scope.questionNum += 1;
        $scope.question = $scope.questions[$scope.questionNum][0];
      }
    }
  }  
};

app.controller('MyCtrl', ['$scope', '$timeout', MyCtrl]);

在ClickThis功能中，我禁用按钮并根据其是否正确或更改来更改样式。但是，当我再次调用init（）时，在用户单击重置后，样式更改仍然存在。

有没有办法让它刷新或至少再次访问这些元素（即my-btn类）来重新设置样式？

谢谢！

Answer 1

您应该使用ng-disabled之类的指令来禁用按钮，或使用ng-class来更改元素的类和样式，而不是修改控制器中的样式。

https://docs.angularjs.org/api/ng/directive/ngDisabled https://docs.angularjs.org/api/ng/directive/ngClass

这样，angular就可以跟踪更改并对元素进行更新。

Answer 2

  element = angular.element(event.target);
  element.css({'color': 'white', 'background-color': 'red'});

这样做你使用jqLite来设置样式，这是错误的，首先，因为你不应该触摸DOM（特别是在控制器中），其次是因为它不是Angular方式。

以下是使用ngClass和ngDisabled：

的更具角度的解决方案

查看

<button class="btn btn-lg btn-info my-btn" ng-class="choice.buttonClass" ng-click="clickThis($event, choice)" ng-disabled="choice.buttonDisabled"> {[{ choice }]} </button>

<强>控制器

$scope.clickThis = function(event, answer) { // Check if the answer is correct or wrong // ... // ... // Set the class of the button according to the correctness answer.buttonClass = correctAnswer ? 'answer-correct' : 'answer-wrong'; // Disable the button according to the correctness answer.buttonDisabled = correctAnswer; }

如果您希望按照自己的方式并使用jqLite方式，您可以简单地使用element.removeAttr('style')删除所有以前应用的样式。

AngularJS：重置angular.element css更改

2 个答案: