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 相关文章推荐
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
May 10 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 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
ip签名探针
2006/10/09 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
php集成开发环境详解
2019/09/24 PHP
javascript一点特殊用法
2008/05/28 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
详解javascript void(0)
2020/07/13 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
顶岗实习计划书
2015/01/16 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL