javascript - 单击复选框时从 json 中删除第一个对象 - AngularJs + NodeJs

Question

这是我的 JSON 对象:

[
   { 
      field1: 'gsm',
      field2: 'firstname',
      field3: 'lastname',
      field4: 'street',
      field5: 'city',
      field6: 'region',
      field7: 'postcode',
      field8: 'dob',
      field9: 'email',
      field10: 'company',
      field11: 'url',
      field12: 'country',
      field13: 'data1',
      field14: 'data2',
      field15: 'data3' 
   },

   { 
      field1: '123456789',
      field2: 'Mohamed',
      field3: 'Sameer',
      field4: 'Salai',
      field5: 'Salai',
      field6: 'Asia',
      field7: '111111',
      field8: '10-10-10',
      field9: 'mohd@if.com',
      field10: 'ifelse',
      field11: 'ifelse',
      field12: 'India',
      field13: 'test',
      field14: 'test',
      field15: 'test' 
   },
   { 
      field1: '123456789',
      field2: 'Hameed',
      field3: 'Basha',
      field4: 'Salai',
      field5: 'Salai',
      field6: 'Asia',
      field7: '600091',
      field8: '10-10-10',
      field9: 'hameed@gmail',
      field10: 'ifelse',
      field11: 'ifelse',
      field12: 'India',
      field13: 'test',
      field14: 'test',
      field15: 'test' 
   }
]

我有这个 json 对象，我在 angularjs 的帮助下使用 ng-repeat 函数向客户端显示这个 json。

我有一个复选框和一张表，我在表中显示此 json 数据。

如果我单击该复选框，我想从 json 中删除第一个对象。

预期输出:(如果我选中了复选框)

[
      { 
         field1: '123456789',
         field2: 'Mohamed',
         field3: 'Sameer',
         field4: 'Salai',
         field5: 'Salai',
         field6: 'Asia',
         field7: '111111',
         field8: '10-10-10',
         field9: 'mohd@if.com',
         field10: 'ifelse',
         field11: 'ifelse',
         field12: 'India',
         field13: 'test',
         field14: 'test',
         field15: 'test' 
      },
      { 
         field1: '123456789',
         field2: 'Hameed',
         field3: 'Basha',
         field4: 'Salai',
         field5: 'Salai',
         field6: 'Asia',
         field7: '600091',
         field8: '10-10-10',
         field9: 'hameed@gmail',
         field10: 'ifelse',
         field11: 'ifelse',
         field12: 'India',
         field13: 'test',
         field14: 'test',
         field15: 'test' 
      }
]

如果用户未选中，我希望再次使用 json 中的第一个对象。

我的复选框代码:(Jade)

输入(类型='复选框')

我的用户界面:

Answer 1

试试这个:

var data = [
   { 
      field1: 'gsm',
      field2: 'firstname',
      field3: 'lastname',
      field4: 'street',
      field5: 'city',
      field6: 'region',
      field7: 'postcode',
      field8: 'dob',
      field9: 'email',
      field10: 'company',
      field11: 'url',
      field12: 'country',
      field13: 'data1',
      field14: 'data2',
      field15: 'data3' 
   },

   { 
      field1: '123456789',
      field2: 'Mohamed',
      field3: 'Sameer',
      field4: 'Salai',
      field5: 'Salai',
      field6: 'Asia',
      field7: '111111',
      field8: '10-10-10',
      field9: 'mohd@if.com',
      field10: 'ifelse',
      field11: 'ifelse',
      field12: 'India',
      field13: 'test',
      field14: 'test',
      field15: 'test' 
   },
   { 
      field1: '123456789',
      field2: 'Hameed',
      field3: 'Basha',
      field4: 'Salai',
      field5: 'Salai',
      field6: 'Asia',
      field7: '600091',
      field8: '10-10-10',
      field9: 'hameed@gmail',
      field10: 'ifelse',
      field11: 'ifelse',
      field12: 'India',
      field13: 'test',
      field14: 'test',
      field15: 'test' 
   }
]

然后在你的 Controller 中添加功能:

var deletedItem = [];
function onchangeCheckBox(isChecked) {
  if(isChecked && data.length > 0) {
    deletedItem = data.splice(0,1);
  } else if(deletedItem.length > 0 ){
    data.unshift(deletedItem[0]);
    deletedItem = [];
  }
}

当您取消选中复选框时，请执行以下操作:

data.unshift(deletedItem);
deletedItem = {};