select选择框中,model传的值并非是页面上的值,而是另一个值
对于编程来说,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>
效果图:
![](https://images2015.cnblogs.com/blog/1019580/201610/1019580-20161008161156332-1962172192.png)
方法二(关键点: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>
效果图: