对于编程来说，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. HDU4513 吉哥系列故事——完美队形II Manacher算法

    题目链接:https://vjudge.net/problem/HDU-4513 吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others)    Me ...

  2. physical processor, core, logical processor

    Processor Groups https://docs.microsoft.com/en-us/windows/desktop/ProcThread/processor-groups The 64 ...

  3. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...

  4. 转：创建表空间，删除后再次创建，报错ORA-01119

    原文:http://www.it2down.com/it-oracle-develop/57816.htm 我是个ORACLE新手,在删除了表空间,然后再创建怎么会提示出错? 删除表空间:drop t ...

  5. Tomcat版本是32位、64位问题

    最近遇到一个Tomcat windows安装版本是32位还是64位问题.由于一系列原因,已经无从知晓生产系统上的该程序是32位还是64位. 后来经过仔细查阅资料,得知: 1. tomcat 从6.0. ...

  6. HDU 1711（KMP）字符串匹配

    链接  HDU 1711 Number Sequence KMP 算法 我以自己理解写的,写的不对,不明白的地方海王子出来,一起共同学习: 字符串匹配 就是KMP,一般思想,用一个for循环找开头   ...

  7. 从OutStreamWriter 和Filewriter谈Java编码

    首先看JAVA API的描述: ABOUT OutputStreamWriter: "An OutputStreamWriter is a bridge from character str ...

  8. make的link_directories命令不起作用

    按照<CMake Practice>中第六章的设置,采用include_directories命令去寻找共享库的路径,src/CMakeLists.txt如下: ADD_EXECUTABL ...

  9. ubuntu设置里面怎么少了好多设置了比如桌面背景

    哈哈  我也是醉了  这个虚拟机真的不好对付 解决办法:sudo apt-get install unity-control-center          ok!

  10. 黑马传智JavaEE57期 2019最新基础+就业+在职加薪_汇总

    黑马传智JavaEE57期 2019最新基础+就业+在职加薪 阶段1 语言基础+高级· 1-1-Java基础语法 第14节 数组 111