对于编程来说，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. MySQL基本语句优化10个原则

    在数据库应用中,程序员们通过不断的实践总结了很多经验,这些经验是一些普遍适用的规则.每一个程序员都应该了解并记住它们,在构造SQL语句时,养成良好的习惯.以下10条比较重要的原则供大家参考. 原则1: ...

  2. nginx、mysql、php等各编译参数查询

    查看nginx编译参数:/usr/local/nginx/sbin/nginx -V 查看apache编译参数:cat /usr/local/apache2/build/config.nice 查看m ...

  3. YTU 2802: 判断字符串是否为回文

    2802: 判断字符串是否为回文 时间限制: 1 Sec  内存限制: 128 MB 提交: 348  解决: 246 题目描述 编写程序,判断输入的一个字符串是否为回文.若是则输出"Yes ...

  4. MYSQL初级学习笔记八：MySQL中常用的函数！（视频序号：初级_45-50)

    知识点十:MySQL中的函数(45-50) 数学函数: 名称 描述 CEIL() 进一取整 FLOOR() 舍一取整 MOD 取余数(取摸) POWER() 幂运算 ROUND() 四舍五入 TRUN ...

  5. poj 2406 Power Strings（kmp求一个串的重复子串）

    题意:重复子串次数 思路:kmp #include<iostream> #include<stdio.h> #include<string.h> using nam ...

  6. 默认action和ActionSupport

    默认action: <action></action>中的name属性值与<default-action-ref></default-action-ref&g ...

  7. python-----实现print不换行

    python中print输出是默认换行的,那如何我们不想换行,且需要用多个print函数输出时,就需要改变print默认换行的属性: 例: print('Hello') print('!') 输出结果 ...

  8. zepto.js 总结

    zepto.js 中的注意事项 ,详见:http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html zepto被弃用的原因:详见:http ...

  9. E20180404-hm

    reject vt. 拒绝; 排斥; 抛弃,扔掉; 吐出或呕吐; conditioner  n. 调节器,调节装置 fabric n. 织物; 布; 构造; (建筑物的) 结构(如墙.地面.屋顶):质 ...

  10. 51nod1127【尺取】

    思路: 尺取,写挫了,debug了半天. #include <bits/stdc++.h> using namespace std; typedef long long LL; const ...