解决ionic中运用mobiscroll插件输入框内容重置的实现--clear()

17 篇文章 0 订阅
3 篇文章 0 订阅

有时在同一个页面会需要使用多个mobiscroll的控件,例如:
这里写图片描述

操作过程中,在进行选择之后,如图:
这里写图片描述

可能需要重置恢复到原本的页面:
这里写图片描述
常常需要添加一个“重置”的功能。
这个功能如何实现,其实很简单,只需一个clear()方法即可。
具体操作为:
在标签里面写上mobiscroll-instanc属性,在所需的按钮上添加点击事件
ng-click=”demoType.clear();”
需要注意的是mobiscroll-instanc的属性值要和clear()方法前面的保持一致。
完整代码为:
html:

<ul class="rzInfo">
    <li class="row">
        <span class="col-xs-5">产品类型</span>
        <select ng-model="myselectType" mobiscroll-select="settings" mobiscroll-instance="demoType">
            <option value="0">请选择</option>
            <option value="1">化学类</option>
            <option value="2">针剂类</option>
            <option value="3">中药类</option>
        </select>
    </li>
    <li class="row">
        <span class="col-xs-5">产品名称</span>
        <select class="" ng-model="myselectName" placeholder="请选择" mobiscroll-select="settings" mobiscroll-instance="demoName">
            <option value="0">请选择</option>
            <option value="1">产品类型</option>
            <option value="2">产品名称</option>
            <option value="3">产品规格</option>
        </select>
    </li>
    <li class="row">
        <span class="col-xs-5">规格</span>
        <select class="" ng-model="myselectGuige" placeholder="请选择" mobiscroll-select="settings" mobiscroll-instance="demoGuige">
            <option value="0">请选择</option>
            <option value="1">10ml</option>
            <option value="2">20ml</option>
            <option value="3">30ml</option>
        </select>
    </li>
    <li class="row">
        <span class="col-xs-5">批号</span>
        <!--<b class="" contenteditable="true" ng-model="dataclean" ></b>-->
        <input type="text" ng-model="search.searchPihao" name="" class="col-xs-7" value="" />
    </li>
    <li class="row">
        <span class="col-xs-5">密码</span>
        <input type="text" ng-model="search.searchMima" name="" class="col-xs-7" value="" />
    </li>
    <li class="row">
        <span class="col-xs-5">发货编号</span>
        <input type="text" ng-model="search.searchFahuo" name="" class="col-xs-7" value="" />
    </li>
</ul>
<button style="position: relative;right: 0;bottom: 0;" ng-click="datacleaned();demostart.clear();demoend.clear();demoGuige.clear();demoName.clear();demoType.clear()">Clear</button>        
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值