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实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
小程序新版订阅消息模板消息
Dec 31 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
JS delegate与live浅析
2013/12/21 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
layui分页效果实现代码
2017/05/19 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
python正则实现提取电话功能
2018/02/24 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
python中的itertools的使用详解
2020/01/13 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
大学生自我鉴定评语
2014/01/27 职场文书
技能比赛获奖感言
2014/02/14 职场文书
手机银行营销方案
2014/03/14 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
高中课程设置方案
2014/05/28 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers