如何在AngularJS中删除或隐藏数组的键值对答案

【问题标题】：How to remove or hide a key-value pair of an array in AngularJS如何在AngularJS中删除或隐藏数组的键值对
【发布时间】：2017-04-01 05:25:24
【问题描述】：

我在这样的数组中有一组对象：

[
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  },...
]

在我看来，我只想显示姓名、年龄、城市和国家。好吧，我的问题是如何删除我收藏的每个对象中的GROUP_ID 和ACTIVE？我一直在寻找解决方案并找到了.slice()，但我不知道它是否正确以及如何对数组中的每个对象使用此 javascript 函数。

编辑：如需更多说明。我的视图定义如下：

<md-list-item ng-repeat="cItems in ::contentItems track by $index">
   <span ng-repeat="(key, value) in cItems track by $index" flex="auto">
      {{ ::value }}
   </span>
   <md-divider></md-divider>
</md-list-item>

【问题讨论】：

当您迭代该数组中的对象时，只需显示您感兴趣的属性。为什么要将它从对象中全部删除？
@yBrodsky 你能给我一个更好的解决方案来将没有这些的值返回到键值对
stackoverflow.com/questions/22918613/…
@yBrodsky 没有理由在这个简单的问题上扔图书馆。
我认为这更像是一个角度问题，如何显示一些属性而一些不显示，而不是如何从对象中删除属性。

标签： javascript angularjs arrays angularjs-ng-repeat

【解决方案1】：

实际上，要以角度显示所需信息，我们不需要从模板中的数组中删除其他元素，我们可以使用有限的信息。

角码

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
]
});

角度模板

<body ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="record in records">
<li>{{record.NAME}}</li>
<li>{{record.AGE}}</li>
<li>{{record.COUNTRY}}</li>
</ul>

但正如您所问，以下程序将回答您的问题。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $data = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
]; 
$scope.records = $data.map(function(item){
delete(item['GROUP_ID']);

delete(item['ACTIVE']);
return item; 
});
});

【讨论】：

【解决方案2】：

您可以使用delete 简单地删除对象的属性。我添加了一组要删除的属性，但您可以直接删除它们。

var data = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
];

var propertiesRemove = ['GROUP_ID', 'ACTIVE']

data.forEach(function(item){
  propertiesRemove.forEach(function(prop){
    delete item[prop];
  });
});

console.log(data);

如果您不想更改数据并且只是显示问题，您可以只呈现您想要的属性。

<md-list-item ng-repeat="cItems in ::contentItems track by $index">
   <span flex="auto">{{cItems.NAME}}</span>
   <span flex="auto">{{cItems.AGE}}</span>
   <span flex="auto">{{cItems.CITY}}</span>
   <span flex="auto">{{cItems.COUNTRY}}</span>
   <md-divider></md-divider>
</md-list-item>

【讨论】：

我知道在模板中设置属性的简单解决方案。但我需要一个动态解决方案 :).. 我想使用嵌套的 forEach() 函数对性能不太好。
@yuro 您可以使用(key, value) in getUpdatedItem(cItems) track by $index" 更新您的ng-repeat，其中function getUpdatedItem 根据初始元素返回具有您想要的属性的项目，而无需更改任何内容。这是否更符合您的要求？
好的...该功能的外观或工作原理如何？
将它添加到您的控制器上，它可以像getUpdatedItem(item) { return { NAME: item. NAME, AGE: item.AGE, CITY: item.CITY, COUNTRY: item.COUNTRY } } 一样简单。如果你愿意，可以用它更新答案
也不错。但问题是当我动态使用它时。我总是需要定义所有必要的属性，这很乏味。

【解决方案3】：

您可以使用以下几行：

contentItems.forEach(function (entry) {
  delete entry['GROUP_ID'];
  delete entry['ACTIVE'];
});

【讨论】：

@yuro 顺便说一句，这与 AngularJS 无关。这是纯 JavaScript 代码。
@yuro 如果您想使用 AngularJS 隐藏这些属性，请不要将它们绑定到任何 HTML 元素。
@yuro 在将数据传递给 ngRepeat 之前准备数据（删除属性）。
好的，等等。我会试试你的解决方案。
谢谢.. 我想这个解决方案已经足够好了。是不是，属性并没有真正从数组中删除？

【解决方案4】：

假设你的数组是一个名为array的变量：

for ( var i=0,l=array.length; i<l; i++ ) {
  delete array[i]['GROUP_ID'];
  delete array[i]['ACTIVE'];
}

如果你使用的是 ES6，你也可以这样做：

for ( let item of array ) {
  delete item['GROUP_ID'];
  delete item['ACTIVE'];
}

【讨论】：

【解决方案5】：

如 cmets 中所述，无需删除密钥。您可以简单地避免显示它们。

如果删除是客观的，那么使用delete方法

a.forEach(function(item){
delete(item['GROUP_ID']);
delete(item['ACTIVE'])
});

DEMO

【讨论】：