一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-03-01 编辑:简简单单 来源:一聚教程网

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

这里写图片描述 

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

html代码如下:

 代码如下 复制代码

 

产品明细

 

  

   

    

     

    

    产品

   

   

  

  

       

  •     {{master.chanpinType}}

        

       

  •    

  •     {{master.chanpinName}}

        

       

  •    

  •     {{master.guige}}

        

       

  •    

  •     {{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)

   }elseif(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'//箭头上下切换

     };

  varbb = angular.copy($scope.cope);

  $scope.masters.push(bb)

  console.log($scope.masters)

 };

 //删除

 $scope.delete=function() {

  vararr = [];

  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;

 };

})

完成的效果为:

点击前

点击前

点击后

点击后

热门栏目