对于编程来说，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. JS中prototype，js原型扩展

    作者:轩脉刃(yjf512)出处:(http://www.cnblogs.com/yjf512/)版权声明:本文的版权归作者与博客园共有.欢迎转载阅读,转载时须注明本文的详细链接. 原文 http:/ ...

  2. POJ 3279 Dungeon Master

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 21242   Accepted: 8265 D ...

  3. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  4. POJ2914 Minimum Cut —— 最小割

    题目链接:http://poj.org/problem?id=2914 Minimum Cut Time Limit: 10000MS   Memory Limit: 65536K Total Sub ...

  5. codeforces A. Kitahara Haruki's Gift 解题报告

    题目链接:http://codeforces.com/problemset/problem/433/A 题目意思:给定 n 个只由100和200组成的数,问能不能分成均等的两份. 题目其实不难,要考虑 ...

  6. 时间:NSTimer,代码时运行时间段,

    一:NSTimer 当时间间隔>1s是用NSTimer; 方法: [NSTimer scheduledTimerWithTimeInterval:0.01 target:self selecto ...

  7. 【AC自动机&&Trie图】积累

    以前KMP和后缀系列(主要是后缀数组,后缀自动机),都刷了一定数量的题,但是对于AC自动机,却有些冷落,罪过. 但是我感觉,在蓝桥杯比赛中AC自动机出现的概率比后缀系列大,简单的会考匹配,稍难一点会考 ...

  8. WIN7开机自动登录设置

    WIN7开机自动登录设置 1    执行rundll32 netplwiz.dll,UsersRunDll 开始菜单中找到运行并单击运行:如下图1所示                         ...

  9. 后台接口平台 基于Laravel 开发 快速开发数据接口

    laravelPCMS V1.5.0 项目地址:https://github.com/q1082121/laravelcms 喜欢的朋友可以支持下 点点星标 百牛信息技术bainiu.ltd整理发布于 ...

  10. CClientDC类 CWindowDC类

    CClientDC类 CClientDC类也是CDC类的派生类.它只能在窗口的客户区(即窗口中除了边框.标题栏.菜单栏以及状态栏外的中间部分)中进行绘图,坐标点(0,0)通常指的是客户区的左上角.它的 ...