对于编程来说，money和rebate代表的是金额优惠和折扣优惠，采用money或rebate便于数据存储。但是页面显示给用户的时候是金额优惠和折扣优惠，并不是显示编程中所存储数据。所以选择的mode值并非是页面中的值，而是同数据存储一样。
方法一（关键点：model）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="test" ng-change="getType()" >
<option value="">--请选择优惠券类型---</option>
<option value="money">金额优惠</option>
<option value="rebate">优惠折扣</option>
</select>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.getType = function(){
var Type = $scope.test;
console.log(Type);
}
});
</script>
</html>
效果图：
方法二（关键点：id）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="test" ng-change="getType()" id="TypeVal">
<option value="">--请选择优惠券类型---</option>
<option value="money">金额优惠</option>
<option value="rebate">优惠折扣</option>
</select>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.getType = function(){ var TypeVal = $('#TypeVal').val();
console.log(TypeVal);
}
});
</script>
</html> 效果如上
方法三（关键点：ng-options）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-options="type.conponType as type.name for type in typeList" ng-model="Typeval" ng-change="getVal()">
<option value="">--请选择优惠类型--</option>
</select>
<h1>使用：{{Typeval}}</h1>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.typeList = [{conponType:'money',name:'金额优惠'},{conponType:'rebate',name:'折扣优惠'}];
$scope.getVal = function(){
console.log($scope.Typeval);
}
});
</script>
</html>
效果图：
