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

来源:互联网 发布:澳门mac专柜 编辑:程序博客网 时间:2024/06/05 10:54

有时在同一个页面会需要使用多个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
原创粉丝点击