AngularJS从对象的ng-repeat中创建带有添加/删除行的表 [英] Angularjs create table with add/delete row, from ng-repeat in object of objects

问题描述

我有与ng-repeat一起创建表的对象列表:

I have list of objects that go with ng-repeat to create a table:

  $scope.fieldData.gridDetails =
   {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "3": {
    "Name" : "Test C",
    "Country" : "France",
    "City" : "Paris"
  }, "4": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

我想编写一个删除对象的代码，就像我删除了"3":{"Name":"Test C" ...我希望它应该是:

I want to make a code to remove object, like if I deleted "3": { "Name": "Test C" ... I want it should be:

  $scope.fieldData.gridDetails =
  {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "3": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

我编写了此代码，但无法正常工作:

I made this code but its not working:

  $scope.removeItem = function(index){ 
    $scope.fieldData.gridDetails[index] = undefined;
  }

但是我的代码保留了它:

but my code keep it :

  $scope.fieldData.gridDetails =
  {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "4": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

推荐答案

要将笨拙的结构转换为数组:

To convert the awkward structure to an array:

var x = $scope.fieldData.gridDetails;
var y = Object.keys(x).map(k => x[k]);

使用该表格对数组进行切片和 push ；

Use the form to slice and push the array;

要将数组转换回笨拙的结构:

To convert the array back to the awkward structure:

var z = y.reduce((a,x,i) => (a[i+1]=x), {});

有关更多信息，请参见

• MDN JavaScript参考-对象
• MDN JavaScript参考-Array.prototype.map()
• MDN JavaScript参考-Array.prototype.reduce()

这篇关于AngularJS从对象的ng-repeat中创建带有添加/删除行的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！