如和在Angularjs中实现<select><option>下拉选中时局部切换页面或DIV

我在<select>标签中选中一个值后,在当前页面<select>标签下,根据这个值来显示相对应的页面或DIV。... 我在<select>标签中选中一个值后,在当前页面<select>标签下,根据这个值来显示相对应的页面或DIV。 展开
 我来答
百度网友e2d7ae3
推荐于2017-10-01 · TA获得超过2207个赞
知道大有可为答主
回答量:1287
采纳率:0%
帮助的人:1611万
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope){
$scope.data = [{id:1,value:'hello'},{id:2,value:'bye'},{id:3,value:'hmmmm'}];
//$scope.selectValue = $scope.data[0].id;
});
</script>
</head>

<body ng-app="myApp">
<form ng-controller="testCtrl">
  <select ng-model="selectValue" ng-options="item.id as item.value for item in data"></select><br /><br />
  <div ng-switch="selectValue">
    <div ng-switch-when="1">hello</div>
    <div ng-switch-when="2">bye</div>
    <div ng-switch-when="3">hmmmm</div>
    <div ng-switch-default>ah?</div>
  </div>
</form>
</body>
</html>

也可以不用switch用ng-show/hide或者ng-if这样的。

圣鸾OJ
2015-09-29 · TA获得超过1629个赞
知道小有建树答主
回答量:1136
采纳率:96%
帮助的人:113万
展开全部
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("testCtrl", function($scope){
$scope.data = [{id:1,value:'hello'},{id:2,value:'bye'},{id:3,value:'hmmmm'}];
//$scope.selectValue = $scope.data[0].id;
});
</script>
</head>

<body ng-app="myApp">
<form ng-controller="testCtrl">
<select ng-model="selectValue" ng-options="item.id as item.value for item in data"></select><br /><br />
<div ng-switch="selectValue">
<div ng-switch-when="1">hello</div>
<div ng-switch-when="2">bye</div>
<div ng-switch-when="3">hmmmm</div>
<div ng-switch-default>ah?</div>
</div>
</form>
</body>
</html>

也可以不用switch用ng-show/hide或者ng-if这样的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式