asked on

Why does'nt my Angular js show/hide script work

I am attempting to use angular ng-show using javascript . I can't get this basic
script to work. Eventually, I want to show/hide one of two forms that will be in the html. I am
trying to get this base script to work first.

The button should not show value until the button is clicked. It is constantly shown.

I need some assistance.

Thanks in advance,
Isaac

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script>
        var app = angular.module('QuickSurveyApp', [])
        app.controller('QuickSurveyController', function ($scope) {
            //This will hide the DIV by default.
            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                //If DIV is visible it will be hidden and vice versa.
                $scope.IsVisible = $scope.IsVisible ? true : false;
            }
        });

    </script>
    <div>
        <input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
        <br />
        <br />
        <div ng-show="IsVisible">My DIV</div>
    </div>
    
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/Controllers/QuickSurveyController.js"></script>
</body>
</html>

// controller

var app = angular.module("QuickSurveyApp", function ($scope, $http) {

    function MyCtrl($scope) {

        $scope.IsVisible = false;

        $scope.Showhide = function () {
            $scope.IsVisible = false;
        };
    }

    
});

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac Johnson

ASKER

Works perfect!

Thanks so much. I am using 1.3 as copied from another module. Which version do you suggest.
If I want to show different forms based on yes/no clicked, will the one controller function be okay.

Initially, neither form will be shown.

Thanks again.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac Johnson

ASKER

Thanks again for the tips.

Julian Hansen

You are welcome