AngularJS ng-hide / ng-show
Question
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)
4 answers
solution1
0 2016-02-10 19:34:33
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>
solution2
0 2016-02-10 19:34:48
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
solution3
0 2016-02-10 19:35:43
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>
Technically you should create a module and add components to that module (in enterprise world).
solution4
0 2016-02-10 19:35:50
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', []);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.