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>


效果图：

方法二（关键点：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>

效果图：

相关阅读:
c++学习--面向对象一实验
 c++学习--面向对象一
 c#学习
 Linux安全之SSH 密钥创建及密钥登录，禁止密码登陆
 laravel 5.5 跨域问题并且laravel的跨域 Access-Control-Allow-Origin 报错的坑
 安装 lnmp
微信小程序-聊天功能下拉加载更多数据（历史聊天内容出现在顶部）
简单实现小程序view拖拽功能
 mysql 常用命令
 有感而发——写给曼曼的信
原文地址：https://www.cnblogs.com/liziyou/p/5939179.html