单击复选框时从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)

输入(type=‘checkbox’)

我的UI：

​

​

Answer 1

它可能对你有帮助！

​

     var d=[
           { 
              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' 
           }
        ];
        var temp={};
         var app = angular.module('testApp',[]);
            app.controller('testCtrl',function($scope){
            $scope.data=d;
             
              $scope.checkbox_link=function(i){
                var ele=document.getElementById("checkbox_id");
                if(ele.checked==true){
                   if($scope.data.length>1){
                       temp=$scope.data[i];
                       $scope.data.splice(i,1);
                   }
                }else{                                   
                    $scope.data.splice(0,0,angular.copy(temp));
                   }
              }
            });

 table{
    width:100%;
    border-collapse:collapse;
    }

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <div ng-app="testApp" ng-controller="testCtrl">
        <input type="checkbox"  ng-click="checkbox_link(0)" id="checkbox_id"/> skip first row
        {{temp}}
          <table border="1">
            <tr ng-repeat="d in data">
              <td>{{$index+1}} </td>
              <td>{{d.field1}} </td>
            </tr>
          </table>
        </div>

​

Answer 2

试试这个：

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' 
   }
]

然后在你的控制器中添加函数：

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 = {};