对于编程来说，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>
效果图：
