select选择不同option，局部切换div或者其他布局

最新推荐文章于 2022-11-22 07:00:00 发布

mingqingyuefeng

最新推荐文章于 2022-11-22 07:00:00 发布

阅读量2.6k

点赞数

分类专栏： angularJS 文章标签： angular select

angularJS 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<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这样的,注意：ngOptions使用必须和ngModel一起使用。