angularjs实现下拉列表的选中事件示例


Posted in Javascript onMarch 03, 2017

select标签的对于大家来说很熟悉了,下面我来讲讲AngularJS中 对select的属性设置,做出选择某个下拉选项后控制其他标签的隐藏;

<select style="height:31px; width:100px" id="rewardMethod"name="rewardMethod" class="status_select" ng-model="state">
<option value="0" ng-selected='rewardMethod == "0"'>自动发放</option>
<option value="1" ng-selected='rewardMethod == "1"'>指定中奖人</option>
<option value="2" ng-selected='rewardMethod == "2"'>不发放奖品</option>
</select>

<div class="form-group" ng-if="state != 2">
            <label class="col-sm-3 control-label no-padding-right"
                for="form-field-1">优惠券</label>
            <div class="col-sm-9">
              <select style="height:31px; width:100px" id="reward"
                  name="reward" class="status_select">
                <option ng-repeat='item in couponList' ng-value="item.id"
                    ng-selected="couponInfoid == item.couponName">{{item.couponName}}
                  总数:{{item.countLimit}}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group" ng-if="state == 0">
            <label class="col-sm-3 control-label no-padding-right"
                for="form-field-1"><span class="red">*</span>奖品发放数量</label>
            <div class="col-sm-9">
              <input type="text" name="rewardProvideCount" id="rewardProvideCount"
                  class="form-control"
                  check-type="required">
            </div>
          </div>
        </form>
      </div>

其中在select中设ng-model = “state”双向绑定数据,他的值会随你选择下拉项而改变,就是选中的option的value;在下面的div中设置ng-if="state == 1" 进行控制;

当页面进行修改操作的时候,需要把原来的值填入表单中,所以加了ng-selected='rewardMethod == "2"'

在controller。js中设置$scope.rewardMethod=2;这样加载页面就会选中第三项;效果如下:

angularjs实现下拉列表的选中事件示例

如果选择不发奖:

angularjs实现下拉列表的选中事件示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
JSONP跨域请求
Mar 02 #Javascript
You might like
php自定义hash函数实例
2015/05/05 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中zfill()方法的使用教程
2015/05/20 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python中的集合介绍
2019/01/28 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python实现代码统计器
2019/09/19 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
生物学学生自我评价
2014/01/17 职场文书
高中物理教学反思
2014/02/08 职场文书
厨师长岗位职责
2014/03/02 职场文书
怀念母亲教学反思
2014/04/28 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
伏羲庙导游词
2015/02/09 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL