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

来源:互联网 发布:淘宝开店 pdf 编辑:程序博客网 时间:2024/05/29 18:51

<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一起使用。

原创粉丝点击