Question

我之前发布了question试图让ng-show超时。该解决方案效果很好。我现在遇到一个新问题，我遇到了ng-hide else if语句的问题。我尝试实现相同的策略，h5标题不断显示，即使我告诉文本在3000ms后隐藏超时。

例如，当某人在文字框中输入'蓝鲸'时，错误答案消失，并显示蓝鲸是正确的！'很棒，但3秒后消失，文本框为空，低于它显示错误答案。这是问题错误答案在3秒后仍未看到超时。

在实施我当前的解决方案时，我也会在页面上收到脚本错误。

HTML

       <form>
          <div class="form-group">
            <label>{{ question }}</label>
            <input type="text" class="form-control" ng-model="myAnswer"><!--angular directive-->
          </div>

        </form>
            <div ng-show="myquestion(myAnswer)"> <!--angular directive-->
                <h5>{{ ansConf }}</h5><!-- if answer equals blue whale return string-->
            </div>
            <div ng-hide="myquestion(myAnswer)">
                <h5>{{ wrongAns }}</h5>
            </div>
            </div>
            <div class="col-md-4 odb" ng-init="whaleOne = 'assets/img/site/2560 8.jpg'" >
                <a href="#" ng-click="infoOne()"> <!--angular directive-->
                <img class="img-thumbnail img-responsive" ng-src="{{ whaleOne }}"> <!--angular directive-->
            </a>
            </div>

AngularJS代码

var app = angular.module("bigBlue", []); 

app.controller('whaleController', ['$scope', '$window', '$timeout', function($scope, $window, $timeout) { 

  $scope.question = 'Which whale is blue ?';
  $scope.rightAns = 'blue whale';
  $scope.wrongAns = 'nope';
  $scope.ansConf = 'Blue Whale is correct !';

  // setting value of the first question variable '' open string
  $scope.myAnswer = '';

   $scope.myquestion = function(myAnswer){

    if (myAnswer == $scope.rightAns){

      $timeout(function () {
                $scope.myAnswer = '';
            }, 3000);

      return true;
    }
    else if (myAnswer != $scope.rightAns) {
       $timeout(function () {
                $scope.myAnswer = '';
            }, 3000)
      return false;
    }
// in the else if statement i am trying to get the message (incorrect answer to disappear after 3 seconds and the text box to be blank)this is associated with ng-hide. 
  }

Answer 1

app.controller('whaleController', ['$scope', '$window', function($scope, $window, $timeout) {

你忘了$ timeout

app.controller('whaleController', ['$scope', '$window', '$timeout', function($scope, $window, $timeout) {

它生成一个循环，添加一个条件：

$scope.myquestion = function (myAnswer) {
    if (myAnswer) {
        if (myAnswer == $scope.rightAns) {

            $timeout(function () {
                $scope.myAnswer = '';
            }, 3000);

            return true;
        }
        else if (myAnswer != $scope.rightAns) {
            $timeout(function () {
                $scope.myAnswer = '';
            }, 3000)
            return false;
        }

    }
    return false;
}

看看你是否想要这个：

    <div ng-show="myquestion(myAnswer) && myAnswer">
        <h5>{{ ansConf }}</h5>
    </div>
    <div ng-hide="myquestion(myAnswer) || !myAnswer">
        <h5>{{ wrongAns }}</h5>
    </div>

AngularJS（ng-hide）$ timeout无效

1 个答案: