AngularJS ng-hide / ng-show

AngularJS ng-hide / ng-show

本文关键字：ng-show ng-hide AngularJS      更新时间：2023-09-26

我正在学习AngularJS，但我对"ng-hide"指令有问题，它不起作用。

这是我的HTML代码：

<!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>

这是我为 Angular 编写的脚本

http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js（当然，在"脚本"标签之间）

您需要初始化应用程序。将ng-app添加到您的 html 中

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

然后创建应用模块

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

您不是在引导应用程序。

索引.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>

脚本.js

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

普伦克

目前您还没有通过角度编译器编译页面，为此您需要添加ng-app指令（基本上它需要模块名称，但在示例中您应该只这样做才能使它工作。

标记 

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

演示普伦克

尔

从技术上讲，您应该创建一个模块并向该模块添加组件（在企业世界中）。

Jose 你必须告诉你的页面它是一个 Angular 应用程序

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

并且您必须在JS文件中创建应用程序：

angular.module('app', []);
相关文章：