手机版

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

时间:2021-09-05 来源:互联网 编辑:宝哥软件园 浏览:

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

选择style=' height :31 pxwidth :100 px ' id=' RePut method ' name=' RePut method ' class=' status _ select ' ng-model=' state '选项值=' 0 ' ng-selected=' RePut method==' 0 '自动发放/option选项值=' 1 ' ng-selected=' RewardMethod==' 1 ' '指定中奖人/option选项值=' 2 ' ng-selected=' RewardMethod==' 2 ' '不发放奖品/option/selectdiv 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 :31 px;宽度:100 px ' id='悬赏' name='悬赏' class=' status _ select '选项ng-repeat=' couponList '中的项目ng-value=' item。id ' ng-selected=' couponInfoid==item。couponname“{ item。couponname } }总数: { { item }。计数限制} }/option/select/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 '输入类型=' text ' name=' RewardProvideCount ' id=' RewardProvideCount ' class=' form-control ' check-type=' required '/div/form/div其中在挑选中设ng-model="state "双向绑定数据,他的值会随你选择下拉项而改变,就是选中的选择权的价值;在下面的差异中设置ng-if='state==1 '进行控制;

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

在控制器。射流研究…中设置$ scope。RewardMethod=2;这样加载页面就会选中第三项;效果如下:

这里写图片描述

如果选择不发奖:

这里写图片描述

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

版权声明:angularjs实现下拉列表的选中事件示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。