ionic中列表项增加和删除的实现方法


Posted in Javascript onJanuary 22, 2017

 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如:

ionic中列表项增加和删除的实现方法 

要实现可以选中商品,以及对商品的信息列表进行显示与否的操作

html代码如下:

<div class="chanpinxiangqing">
 <div class="item item-divider">产品明细</div>
 <div class="chanpinxiangqing" ng-repeat="master in masters">
  <div class="item item-divider">
   <div class="" ng-click="selectorOne($index)" style="display: inline-block;width: 50%;">
    <div class="chioceHook sPround">
     <div class="ion-checkmark-round ng-hide" ng-show="master.checked" style=""></div>
    </div>
    <span style="margin-left:20px;">产品</span>
   </div>
   <div ng-click="upOrdown($index);" ng-class="{true:'up',false:'upDown'}[master.updown]"></div>
  </div>
  <ul class="rzInfo" ng-show="master.up">
   <li class="row">
    <span class="col-xs-5"><!--产品类型-->{{master.chanpinType}}</span>
    <select class="" ng-model="myselectType" mobiscroll-select="settings" mobiscroll-instance="demo">
     <option value="0">请选择</option>
     <option value="1">中药</option>
     <option value="2">西药</option>
    </select>
   </li>
   <li class="row">
    <span class="col-xs-5"><!--产品名称-->{{master.chanpinName}}</span>
    <select class="" ng-model="myselectName" placeholder="请选择" mobiscroll-select="settings" mobiscroll-instance="demo">
     <option value="0">请选择</option>
     <option value="1">注射剂</option>
     <option value="2">麻醉剂</option>
    </select>
   </li>
   <li class="row">
    <span class="col-xs-5"><!--规格-->{{master.guige}}</span>
    <select class="" ng-model="myselectGuige" placeholder="请选择" mobiscroll-select="settings" mobiscroll-instance="demo">
     <option value="0">请选择</option>
     <option value="1">10ml</option>
     <option value="2">20ml</option>
    </select>
   </li>
   <li class="row">
    <span class="col-xs-5"><!--单位-->{{master.danwei}}</span>
    <input type="text" name="" class="col-xs-8" value="" />
   </li>
   <li class="row">
    <span class="col-xs-5"><!--数量-->{{master.num}}</span>
    <!--<b class="" contenteditable="true" ng-model="dataclean" ></b>-->
    <input type="text" name="" class="col-xs-8" value="" />
   </li>
   <li class="row">
    <span class="col-xs-5"><!--单价(元)-->{{master.price}}</span>
    <input type="text" name="" class="col-xs-8" value="" />
   </li>
   <li class="row">
    <span class="col-xs-5"><!--总价-->{{master.total}}</span>
    <input type="text" name="" readonly class="col-xs-8" value="" />
   </li>
  </ul>
 </div>
</div>
<div class="" style="margin-top: 10px;padding:10px;text-align: right;background: #fff;"><span>合计发货总额:</span></div>
<div class="">
 <div class="btnadd" ng-click="add()">增加</div>
 <div class="btndel" ng-click="delete()">删除</div>
</div>

js代码:

//控制器及服务等
.controller('fhShenQingAddCtrl', function($scope, CONFIG, $ionicSlideBoxDelegate, $rootScope, $http, $ionicPopup, faHuoService, $timeout, $window, loading, tool) {
//产品下的类型名称及规格的选择弹窗设置
 $scope.settings = {
  theme: 'mobiscroll',
  lang: 'zh',
  display: 'center',
  cancelText: '取消',
  setText: '确定',
  onBeforeClose: function(event, inst) {
   if(event.button == "set") {
    $scope.startdate = event.valueText;//获取选择日期
    console.log($scope.startdate)
   } else if(event.button == "cancel") {
    console.log("取消")
   }
  }
 };
 //增加
 $scope.masters= [{'chanpinType':'产品类型',
     'chanpinName':'产品名称',
     'guige':'规格',
     'danwei':'单位',
     'num':'数量',
     'price':'单价(元)',
     'total':'总价',
     'checked':'true',//选中切换
     'updown':'true',//下拉内容显示切换
     'up':'true'//箭头上下切换
     }];
 $scope.add = function() {
  $scope.cope={'chanpinType':'产品类型',
     'chanpinName':'产品名称',
     'guige':'规格',
     'danwei':'单位',
     'num':'数量',
     'price':'单价(元)',
     'total':'总价',
     'checked':'true', //选中切换
     'updown':'true', //下拉内容显示切换
     'up':'true' //箭头上下切换
     };
  var bb = angular.copy($scope.cope);
  $scope.masters.push(bb) 
  console.log($scope.masters)
 };
 //删除
 $scope.delete = function() {
  var arr = [];
  angular.forEach($scope.masters,function(item,index){
   if(!item.checked){
    arr.push(item);     
   }
  })
  //console.log(arr)
  $scope.masters = arr;
 };
 //切换箭头的上下指向这里写代码片
 $scope.upOrdown = function(rowNumber){
  console.log($scope.masters[rowNumber].updown)
  $scope.masters[rowNumber].up = !$scope.masters[rowNumber].up;
  $scope.masters[rowNumber].updown=!$scope.masters[rowNumber].updown;
 };
 //某一行选中
 $scope.selectorOne = function(rowNumber) {
  console.log($scope.masters[rowNumber].checked)
  $scope.masters[rowNumber].checked = !$scope.masters[rowNumber].checked;
 };
})

完成的效果为:

点击前

ionic中列表项增加和删除的实现方法

点击后

ionic中列表项增加和删除的实现方法

以上所述是小编给大家介绍的ionic中列表项增加和删除的实现方法,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
js实现图片上传即时显示效果
Sep 30 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 #Javascript
js遍历json的key和value的实例
Jan 22 #Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 #Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 #Javascript
You might like
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
入党转预备思想汇报
2014/01/07 职场文书
大学生入党思想汇报
2014/01/14 职场文书
交通文明倡议书
2014/05/16 职场文书
员工试用期自我评价
2014/09/18 职场文书
企业党员个人自我评价
2014/09/20 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Python实现生成bmp图像的方法
2021/06/13 Python
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis