对于编程来说，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>

效果图：

select选择框中，model传的值并非是页面上的值，而是另一个值的更多相关文章

  1. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  2. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  3. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  4. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  5. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  6. Chosen：Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  7. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  8. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  9. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

随机推荐

  1. YTU 2392: 求各位数字之和

    2392: 求各位数字之和 时间限制: 1 Sec  内存限制: 128 MB 提交: 1253  解决: 292 题目描述 编写一个程序,计算任意输入的正整数的各位数字之和.(输入的位数不要超过10 ...

  2. contents属性

    CALayer 有一个属性叫做contents,这个属性的类型被定义为id,意味着它可以是任何类型的对象.在这种情况下,你可以给contents属性赋任何值,你的app仍然能够编译通过.但是,在实践中 ...

  3. 目录操作（PHP）

    1.创建目录(文件夹)mkdir("./test");2.删除目录(文件夹)只能删除空的文件夹rmdir("./test");3.移动目录(文件夹)rename ...

  4. ajax验证用户名 当用户名框的数据改变时 执行ajax方法

    ajax验证用户名 当用户名框的数据改变时 执行ajax方法 <html xmlns="http://www.w3.org/1999/xhtml" ><head ...

  5. Oracle:手工建库

    今天学习了小布老师的手工建库视频,自己也做了一遍,下面是创建过程记录: 本地环境oracle10.2.0.1 一.前期准备工作 1.设置环境变量 [oracle@app dbs]$ vi bbk.en ...

  6. 如何在cowboy应用中指定mnesia数据库路径

    创建mnesia数据库的步骤简述: 1)定义脚本: -module(mns). -export([setup/0, clean/0]). -record(user, { id, coin, diamo ...

  7. javaScript的几个问题简答

    1.javascript的typeof返回哪些数据类型    Object.number. function. boolean. underfind 2.例举3种强制类型转换和2种隐式类型转换?    ...

  8. 【转】git修改文件后，提交到远程仓库

    原文地址:https://blog.csdn.net/nly19900820/article/details/73613654 修改文件后,怎么提交到远程仓库1.git status 查看git是否有 ...

  9. UVa11077

    dp+置换 可以把排列分成几个循环,然后dp统计 dp[i][j]=dp[i-1][j-1]*(i-1)+dp[i-1][j],表示当前有i个元素,至少换j次,然后如果不在自己应该在的位置有i-1种情 ...

  10. UVaLive 7455 Linear Ecosystem (Gaussi 消元)

    题意:对一个k元向量, 每次左乘一个k*k的矩阵得到新的向量.问经过一定次数的左乘后,能否使得该向量不再变化. (同时要求此时向量非零). 析:设初始向量为A,矩阵为P.由于每次矩阵P都是左乘A, 那 ...