AngularJS Message Display On Click

Question

I have two questions

How to display the initial message and/or upon button click. The current code I have displays the message continuously. I want it to display initially and once users starts pressing other button I want the message "Start guessing" to disappear and only appear after user clicks Start Over button.
How to display the correct answer when user clicks on Give up.

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>

Angular

/*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();

}
                );

Erazihel · Accepted Answer · 2016-03-24 16:52:30Z

1

1) Use ng-hide to hide your element when needed:

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

In the checkGuess and showAnswer functions set the hideMessage to true:

$scope.hideMessage = true;

In the startGame function, set it to false:

$scope.hideMessage = false;

2) In your HTML add a tag:

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

And in your showAnser and startGame function, add:

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

And remove of the showAnswer function:

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

Finally, in the startGame function, set it to false:

$scope.showOriginal = false;

edited Mar 24, 2016 at 16:52

answered Mar 24, 2016 at 16:09

Erazihel

7,6456 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

user5092549 Over a year ago

Awesome mate ! But there is a problem. Everything seems to work except The answer doesn't disappear when Start Over is clicked. I have to refresh page to hide the answer.

Erazihel Over a year ago

@FoxMuler I forgot that case. Edited my post, should be ok now.

user5092549 Over a year ago

not working now. This one also looks confusing. Previous one I understood.

Erazihel Over a year ago

@FoxMulder be carefull, I also modified the HTML to <div ng-show="showAnswer">{{previousOriginal}}</div>

user5092549 Over a year ago

yep, give up doesn't work. I think you also made a mistake saying set $scope.showAnswer = true in startGame as it will start showing the answer from the beginning. Anyways it's not working and I am not able to figure out the issue.

|

Collectives™ on Stack Overflow

AngularJS Message Display On Click

1 Answer 1

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related