ng-show ng-hide

最新推荐文章于 2019-12-05 18:02:21 发布

原创最新推荐文章于 2019-12-05 18:02:21 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular JS

angular JS 专栏收录该内容

1 篇文章

订阅专栏

本文通过三个示例展示了如何使用AngularJS实现元素的显示与隐藏功能。包括利用函数控制、表达式控制及表单验证反馈来动态切换元素的可见状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=red][size=large]函数控制显示隐藏[/size][/color]


<!DOCTYPE html>
<html  lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="js/jquery-3.1.1.js"></script>
	<script src="js/angular.js"></script>
	<script>
		var app=angular.module("app",[]);
		app.controller("ss",function($scope){
			$scope.a=true;
			$scope.b=function(){
				$scope.a=!$scope.a;
			}
		})
	</script>
	</head>
	<body ng-app="app" ng-controller="ss">
		<div ng-show="a">asdfsdfds</div>
		<span ng-click="b()">点击</span>
	</body>
</html>

[color=red][size=large]表达式控制显示隐藏[/size][/color]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
	<meta charset="utf-8" />
    <title>show-hide</title>
    <script src="js/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('showHideController', function ($scope) {
            $scope.a = function () {
                $scope.animal = '';
            }
        });
    </script>
</head>
<body>
	<input type="" name="" id="" ng-model="animal" placeholder="请输入dog"/><br />
	<span ng-show="animal=='dog'" >it is a dog</span>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

<p>在输入框中输入你的邮箱地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>
</html>