对于编程来说，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. idea 破解注册方法总结

    注册码(无期限) JetbrainsCrack-2.6.2.jar适用于ideaIU-2017.2.之前版本,若版本较新适用 JetbrainsCrack-2.6.3_proc.jar. 其中Jetb ...

  2. MM02函数

    ATA: ls_headdata LIKE bapimathead, ls_clientdata LIKE bapi_mara, ls_clientdatax LIKE bapi_marax, ls_ ...

  3. mysql优化-----索引覆盖

    一道面试题: 有商品表, 有主键,goods_id, 栏目列 cat_id, 价格price 说:在价格列上已经加了索引,但按价格查询还是很慢,问可能是什么原因,怎么解决? 答:在实际场景中,一个电商 ...

  4. mysql---列的选取原则

    列选择原则: :字段类型优先级 整型 > date,整型>浮点型,time > enum,char>varchar > blob 列的特点分析: 整型: 定长,没有国家/ ...

  5. (linux)platform_driver_probe与platform_driver_register的区别

      [驱动注册]platform_driver_register()与platform_device_register()          设备与驱动的两种绑定方式:在设备注册时进行绑定及在驱动注册 ...

  6. httpd2.4.27rpm包制作

    http2.4.27 rpm包制作1.安装rpm-buildyum -y install rpm-build2.使用普通用户创建spec规则文件su - lxhvim httpd.spec Name: ...

  7. react native 中的redux

    一.使用redux 的条件: 1.某个组件的状态,需要共享: 2.某个状态需要在任何地方都可以拿到: 3.一个组件需要改变全局状态: 4.一个组件需要改变另一个组件的状态. redux   说明白点, ...

  8. SPOJ:NO GCD (求集合&秒啊)

    You are given N(1<=N<=100000) integers. Each integer is square free(meaning it has no divisor ...

  9. JQ的双向数据绑定

    把渲染页面封装在function里面 在修改后直接调用,但是如果有alert();一定要注意function的摆放位置,正常应该是在alert前面,应为如果在后面会影响重新渲染的效果

  10. iconMoon---小图标小记

    IcoMoon 是一个免费的图标库.可以下载自己需要的图标 三.使用流程.操作演示 进入主页,点击下图所示区域开始: 每个图标你都是可以自己进行标记的(移上去会看到Edit, 点击之),然后—— 注: ...