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 相关文章推荐
js验证表单大全
Nov 25 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
js微信分享API
Oct 11 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
vue.js路由跳转详解
Aug 28 Javascript
面包屑导航详解
Dec 07 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 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统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
简单的php购物车代码
2020/06/05 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
javascript模块化简单解析
2016/04/07 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python使用zip将list转为json的方法
2018/12/31 Python
解析Python的缩进规则的使用
2019/01/16 Python
python操作文件的参数整理
2019/06/11 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python坐标线性插值应用实现
2019/11/13 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python实现飞行棋游戏
2020/02/05 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
keras 多gpu并行运行案例
2020/06/10 Python
django中cookiecutter的使用教程
2020/12/03 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
如何手工释放资源
2013/12/15 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
个性发展自我评价
2014/02/11 职场文书
购房委托书
2014/10/15 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书