javascriptcssangularjsng-classangular-ng-class

Why does my ng-class display even when false


I have an image I'm trying to shake when a user guesses the name of a fish wrong. I'm using a conditional ng-class="{'shake':error}". However, even when the answer is correct the image shakes. I don't believe that at anytime $scope.error is set to true. What am I missing here?

codepen


Solution

  • I think what you want to do is return guessIsCorrect or guessIsWrong from your compare function.

    $scope.compare = function(guess) {
        guess = guess.replace(/\s/g, '').toLowerCase();
        var answers = [];
        answers.push($scope.name.replace(/\s/g, '').toLowerCase());
    
        currentAnimal.alts.forEach(function(alt) {
            answers.push(alt.toLowerCase().replace(/\s/g, ''));
        });
        //console.log(answers);
        //console.log("Guess: " + guess + "\n");
        //console.log("Answer: " + answers + "\n");
    
        for (var x = 0; x <= answers.length; x++) {
            if (guess === answers[x]) {
                return guessIsCorrect();
            }
            if (x === answers.length) {
                return guessIsWrong();
            }
        }
    
    };