javascript - AngularJS:重置 angular.element css 更改

Question

我有一系列使用 ng-repeat 显示的按钮。这些按钮代表一组旋转问题的答案。如果他们点击正确答案按钮，我会更改按钮的样式并将其禁用。所有这一切都很好。但是，当我尝试允许用户单击“重置”按钮时，该按钮运行一个 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>

Controller :

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

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

这样做你正在使用 jqLit​​e 来设置样式，这是错误的，首先，因为你不应该接触 DOM(尤其是在 Controller 中)，其次，因为它不是 Angular 的方式。

这是使用 ngClass 和 ngDisabled 的更 Angular 解决方案:

查看

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

Controller

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

}

如果你想保持你的方式并使用 jqLit​​e 方式，你可以简单地使用 element.removeAttr('style') 删除所有以前应用的样式。