CODEWITHSUNDEEP
javascriptangularjsng-hide
Valentin
Valentin

Reputation: 415

NgHide AngularJs

I'm just trying to understand something that is very simple.

I want to use ngHide with AngularJs to display an element when I click on a word (see link below). JsFiddle Link

On the link what I want to do works but the problem is that when I adapt it to my AngularJs project on a single page the code does not execute. Yet I put the javascript between tags (code below).

<div ng-controller="theCtrl">

  <div id="callFunction" ng-click="myFunction()">content here</div>
  <div id="contactInfo" ng-show="showContent">content here</div>

</div>

<script type="text/javascript">
  angular.module('appName', [])
    .controller('theCtrl', ['$scope', function($scope) {
      $scope.showContent = false;

      $scope.myFunction = function() {
        $scope.showContent = !$scope.showContent;
      }
    }]);

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['appName']);
  });
</script>

Upvotes: 0

Views: 97

Answers (1)

Sarath Raj
Sarath Raj

Reputation: 139

On writing angular code on a single html page you should include angular.min.js source in a script tag. The working code is entered below:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-controller="theCtrl">

  <div id="callFunction" ng-click="myFunction()">content here</div>
  <div id="contactInfo" ng-show="showContent">content here</div>

</div>

<script type="text/javascript">
  angular.module('appName', [])
    .controller('theCtrl', ['$scope', function($scope) {
      $scope.showContent = false;

      $scope.myFunction = function() {
        $scope.showContent = !$scope.showContent;
      }
    }]);

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['appName']);
  });
</script>
</html>

Upvotes: 0

Related Questions