angularJS学习之路（八）---ng-switch

最新推荐文章于 2025-05-15 09:08:36 发布

wust小吴

最新推荐文章于 2025-05-15 09:08:36 发布

阅读量836

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/u014737138/article/details/49993679

angularjs 专栏收录该内容

31 篇文章

订阅专栏

本文介绍 AngularJS 中 ng-switch 指令的使用方法，通过一个示例展示了如何根据变量值的变化来切换不同的视图内容。具体演示了如何结合 ng-model 和 ng-switch-when 来实现条件渲染。

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

这个指令和 ng-switch-when 以及 on="name"一起使用

在name值发生变化时渲染不同的指令到视图中

例子：

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>

		<div ng-controller="SomeController" ng-switch on="person.name">
			<input type="text" ng-model="person.name" />
			<p ng-switch-default>And the winner is</p>
			<h1 ng-switch-when="Erik">{{ person.name }}</h1>
		</div>

		<script type="text/javascript" src="../js/angular.min.js"></script>
		<script>
			var app = angular.module('myApp', []);
			app.controller('SomeController', function($scope) {
				$scope.person = {};
			});
		</script>
	</body>

</html>

ng-switch-default 输出默认值