CODEWITHSUNDEEP
javascriptangularjsng-showng-hide
Jose R. Chacón
Jose R. Chacón

Reputation: 101

AngularJS ng-hide / ng-show

Im learning about AngularJS but I have a problem with the "ng-hide" directive, its doesnt work.

This is my HTML code:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Prueba ng-hide/ng-show</title>
</head>
<body>
    <p ng-hide="true">I'm hidden</p>
    <p ng-show="true">I'm shown</p>
</body>

And this is my script for Angular

http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js (of course, between "script" tags)

Upvotes: 1

Views: 243

Answers (4)

Wilmer SH
Wilmer SH

Reputation: 1417

Jose you have to tell your page that it is an Angular app

<html lang="en" ng-app="app">

and you have to create your app in the JS file:

angular.module('app', []);

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Currently you haven't compiled page by angular compiler, for that you need add ng-app directive(basically it takes module name, but in sample you should do only this to make) it working.

Markup

<body ng-app="">
    <p ng-hide="true">I'm hidden</p>
    <p ng-show="true">I'm shown</p>
</body>

Demo Plunkr

Technically you should create a module and add components to that module (in enterprise world).

Upvotes: 0

nickwoodward
nickwoodward

Reputation: 31

You aren't bootstrapping your application.

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="app"> <!-- You're missing this -->
    <p ng-hide="true">I'm hidden</p>
    <p ng-show="true">I'm shown</p>
  </body>

</html>

script.js

var app = angular.module('app', []); // You're also probably missing this

Plunker

Upvotes: 0

Rashad Ibrahimov
Rashad Ibrahimov

Reputation: 3309

You need to initialize your application. Add ng-app to your html

<html ng-app="MyApp">
...

Then create your app module

<script>
    var app = angular.module("MyApp", []);
</script>

Upvotes: 0

Related Questions