Question

我有两个问题

如何显示初始消息和/或点击按钮。我当前的代码连续显示消息。我希望它最初显示，一旦用户开始按下其他按钮，我希望消息“开始猜测”消失，只有在用户点击“重新开始”按钮后才会显示。
当用户点击“放弃”时，如何显示正确的答案。

HTML

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
    <head>
        <title>Template that uses Bootstrap</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initialscale=1.0"/> 
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <!-- Custom CSS -->
        <link href="css/custom.css" rel="stylesheet" />
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script> 
        <script src="js/respond.min.js"></script>
        <![endif]-->

    </head>
        <body>
            <div data-ng-controller="myCtrl">
                <div class="container">

                    <h1>Guessing Game</h1><br>
                    <label>Enter Guess:</label>
                        <input type="text" id="guess" name="guess" data-ng-model="guess"/><br>
                    <span data-ng-bind="Message"></span>

                    <div class="row">
                        <div class="col-md-12">
                    <button class="btn btn-primary btn-md" data-ng-click="checkGuess()">Check</button>

                    <button class="btn btn-warning btn-md" data-ng-click="showAnswer()">Give Up</button>

                    <button class="btn btn-info btn-md" data-ng-click="startGame()">Start Over</button>
                        </div></div>

                    <div class="row">
                        <div class="col-xs-7">
                    <div ng-show="deviation<0" class="alert alert-warning">Guess higher</div>
                    <div ng-show="deviation>0" class="alert alert-warning">Guess lower</div>
                    <div ng-show="deviation===0" class="alert alert-success">You got it!</div>
                    </div></div>




                </div>

            </div>

            <!-- jQuery – required for Bootstrap's JavaScript plugins) --> 
            <script src="js/jquery.min.js"></script>
            <!-- All Bootstrap plug-ins file -->
            <script src="js/bootstrap.min.js"></script>
            <!-- Basic AngularJS -->
            <script src="js/angular.min.js"></script>
            <!-- Your Controller -->
            <script src="js/app.js"></script>
    </body>
</html>

角

/*global angular */
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function ($scope) {
    "use strict";
    $scope.checkGuess = function () {
        $scope.deviation = $scope.original - $scope.guess;
    };

    $scope.startGame = function () {
        $scope.guess = null;
        $scope.original = Math.floor(Math.random() * 1000 + 1);
        $scope.deviation = null;
        $scope.display = false;
        $scope.Message = "Start guessing.";
    };

    $scope.showAnswer = function () {
        $scope.original = Math.floor(Math.random() * 1000 + 1);
        $scope.display = true;
    };
    $scope.startGame();

}
                );

Answer 1

1）在需要时使用ng-hide隐藏您的元素：

<span data-ng-bind="Message" ng-hide="hideMessage"></span>

在checkGuess和showAnswer个函数中，将hideMessage设置为true：

$scope.hideMessage = true;

在startGame功能中，将其设置为false：

$scope.hideMessage = false;

2）在HTML中添加标签：

<div ng-show="showOriginal">{{previousOriginal}}</div>

在您的showAnser和startGame函数中，添加：

$scope.showOriginal = true;
$scope.previousOriginal = angular.copy($scope.original);

删除showAnswer函数：

$scope.original = Math.floor(Math.random() * 1000 + 1)

最后，在startGame函数中，将其设置为false：

$scope.showOriginal = false;

单击AngularJS消息显示

1 个答案: