angular选取select下拉框中某项option中value的值

本文介绍了一个基于AngularJS的抽奖组件实现,通过选择不同的抽奖类型如spinWin(转盘抽奖)或sudoku(九宫格抽奖),并展示了如何在页面上动态地改变抽奖类型。同时,详细解释了如何在代码中监听抽奖类型的更改,并根据当前选定的类型调整页面的显示逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<select ng-model="content.lotteryType" ng-change="change(content.lotteryType)">
	<option value="spinWin">{{'lottery.type.spinWin'|translate}}</option>
	<option value="sudoku">九宫格</option>
</select>

2.js

            $scope.change = function (type) {
                $scope.myType = type;
            }

3.在同一个html中使用获取到的值myType 即可.

<a ng-click="myType=='sudoku'?currentStep = currentStep - 2:currentStep = currentStep - 1" ng-show="currentStep > 0">前一步</a>

二.

网页上有个框点击后会在下面出现很多可以选择的,但是我每次出现就只想选择到第一个的,别的都不要,他的css要怎么选择。下面是一些的html结构<div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="731" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="731_list" aria-autocomplete="list" aria-controls="731_list" aria-activedescendant="731_list_0" aria-required="true" value=""></span><span class="ait-select-selection-placeholder">请选择</span></div>下面是这个框选择的好的<div class="ait-form-item ait-form-item-has-success"><div class="ait-row ait-form-item-row"><div class="ait-col ait-form-item-label"><label for="731" class="ait-form-item-required" title="">品名(Product name)<span class="edit-btn">修改</span></label></div><div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="731" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="731_list" aria-autocomplete="list" aria-controls="731_list" aria-activedescendant="731_list_1" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i13.69fe23f1sh5zan"></span><span class="ait-select-selection-item"><div title="餐厅套装(restaurant sets)" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i15.69fe23f1sh5zan">餐厅套装(restaurant sets)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div></div></div>下面的是没有选择的第二下拉框<div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="732" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="732_list" aria-autocomplete="list" aria-controls="732_list" aria-activedescendant="732_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i61.69fe23f1sh5zan"></span><span class="ait-select-selection-placeholder">请选择</span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div>下面是选择好的第二下拉框<div class="ait-col ait-form-item-control"><div class="ait-form-item-control-input"><div class="ait-form-item-control-input-content"><div class="ait-select ait-select-in-form-item ait-select-status-success ait-select-single ait-select-show-arrow ait-select-show-search" aria-required="true"><div class="ait-select-selector"><span class="ait-select-selection-search"><input type="search" id="732" autocomplete="off" class="ait-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="732_list" aria-autocomplete="list" aria-controls="732_list" aria-activedescendant="732_list_0" aria-required="true" value="" aria-expanded="false" data-spm-anchor-id="a2g3i.%2Fproduct-publish-v2%2Fpop.0.i61.69fe23f1sh5zan"></span><span class="ait-select-selection-item"><div title="金绿柱石(heliodor)">金绿柱石(heliodor)</div></span></div><span class="ait-select-arrow" unselectable="on" aria-hidden="true" style="user-select: none;"><span role="img" class="anticon ait-select-suffix aiticon aiticon-chevron-down"><svg viewBox="64 64 896 896" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M739.712 355.712a40 40 0 0 1 57.024 56.128l-0.448 0.448-256 256a40 40 0 0 1-56.128 0.448l-0.448-0.448-256-256a40 40 0 0 1 56.128-57.024l0.448 0.448L512 583.424l227.712-227.712z"></path></svg></span></span></div></div></div></div>
最新发布
08-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值