简单教程
提交运行
代码编辑器:
<!DOCTYPE html> <meta charset="utf-8"> <link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script> <body ng-app=""> <form> 选择一个选项: <label><input type="radio" ng-model="myVar" value="dogs">Dogs</label> <label><input type="radio" ng-model="myVar" value="tuts">Tutorials</label> <label><input type="radio" ng-model="myVar" value="cars">Cars</label> </form> <div ng-switch="myVar"> <div ng-switch-when="dogs"> <h1>Dogs</h1> <p>Welcome to a world of dogs.</p> </div> <div ng-switch-when="tuts"> <h1>Tutorials</h1> <p>Learn from examples.</p> </div> <div ng-switch-when="cars"> <h1>Cars</h1> <p>Read about cars.</p> </div> </div> <p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域</p> <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer> </body>
运行结果: