使用AngularJS的方法在对象数组中通过其属性查找对象

Question

我有一个如下的数组

var myArray = [{'id':'73','name':'john'},{'id':'45','name':'Jass'}, etc.]

现在我有一个id为73的对象，如何从数组中选择这个特定的对象。我发现在jQuery中可以使用grep轻松完成这个操作。是否有任何angular方法可以做到这一点？

由于大多数用户使用angular开发应用程序时都会从对象数组中获取数据(主要是表格)，因此应该有一个辅助函数来处理这个问题？

这样，我就可以通过更新对象数组来更改具有相应ID的行的数据。

我不想在视图中绑定它。我想在函数内部操纵数据并更新数据。

例如，我有一个表格列表。如果最终用户编辑表格中的一行，我就有了该对象的ID，所以在最终用户点击保存后，我需要更新数组，然后返回到表格列表。

- rram

---

@JaredSmith 我正在寻找任何 Angular 帮助函数（例如 angular.isNumber），而不是 JavaScript 默认的数组对象方法。 - rram

这根本没有任何意义。为什么需要一个框架辅助函数来替换一个从IE 9一直支持的本地方法？除非你有其他原因，否则它只会被视为XY问题。http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem. - Jared Smith

我可以理解为什么如果您已经在使用Angular，就不想包含jQuery，但是.filter是本地且得到良好支持的。如果您能够给出一个令人信服的理由，说明为什么必须仅使用Angular来解决此问题，我将撤销关闭投票。 - Jared Smith

OP想要一个关于[标签：angularjs]的答案。目标重复问题没有回答这个问题。就像一个jQuery解决方案不能回答一个[标签：javascript]的问题一样。 - Cerbrus

这个问题正在meta上讨论：http://meta.stackoverflow.com/questions/337229/can-we-do-something-how-do-i-do-x-in-angular-react-frameworky - Cerbrus

@JaredSmith OP已经回答了你，但是在被接受的答案的评论中说：“我想在标记视图模式下应用过滤器”。当一个人没有在问题中完全说明他们的要求时，往往会浪费其他人很多时间。这对那些试图帮助你的人来说有点无礼。 - user1228

Answer 1

您可以在控制器中使用Angular的filterhttps://docs.angularjs.org/api/ng/filter/filter

示例代码:

$filter('filter')(myArray, {'id':73}) 

或者在你的HTML中

{{ myArray | filter : {'id':73} }}

- M B

---

谢谢 +1 我原本想在视图模式下使用标记应用过滤器，感谢您提供的在控制器中使用它的想法。 - rram

给其他学习者的一条提示：为了使用这个方法，我们需要在控制器中传递 $filter 参数。 - rram

值得注意的是，上述代码将根据ID作为子字符串进行过滤。因此，过滤ID为73的数据也会找到733、4573、173等。如果要进行严格比较，必须按照文档传递第三个比较器参数“true”。 - Hooligancat

有没有办法将结果存储在HTML中？我需要在某个循环中使用过滤器结果。这样可以减少每次循环迭代中的过滤器处理。顺便说一下，我是Angular的新手。谢谢。 - Govind Totla

Answer 2

纯JavaScript呢？了解更多Array.prototype.filter()。

var myArray = [{'id': '73', 'name': 'john'}, {'id': '45', 'name': 'Jass'}]

var item73 = myArray.filter(function(item) {
  return item.id === '73';
})[0];

// even nicer with ES6 arrow functions:
// var item73 = myArray.filter(i => i.id === '73')[0];

console.log(item73); // {"id": "73", "name": "john"}

- TimoStaudinger

---

谢谢你的帮助，+1。我已经看过了JavaScript的filter方法，但我正在寻找Angular的方式。 - rram

使用“FIND”怎么样？ - Rafael Herscovici

@Dementic 当这个回答写出来的时候，在Chrome中对find的支持还比较新，例如在IE中根本就不可用。另一方面，filter是可用的。 - TimoStaudinger

IE是什么？:) - Rafael Herscovici

Answer 3

如果你想在HTML中访问已从数组中过滤出来的对象的特定属性，为了获得完整的M B答案，你需要按照以下方式进行操作：

{{ (myArray | filter : {'id':73})[0].name }}

因此，在这种情况下，它会在HTML中打印john。

祝好！

- David Corral

Answer 4

对我有用的解决方案如下：

$filter('filter')(data, {'id':10}) 

- Jorge Santos Neill