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

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

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

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

html代码如下：

产品

{{master.chanpinType}}

请选择

中药

西药

{{master.chanpinName}}

请选择

注射剂

麻醉剂

{{master.guige}}

请选择

10ml

20ml

{{master.danwei}}

{{master.num}}

{{master.price}}

{{master.total}}

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中列表项增加和删除的实现方法，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。