Angular：混合 ng-repeat、数组和带有 id 的对象答案

【问题标题】：Angular: mixing ng-repeat, arrays, and objects with idsAngular：混合 ng-repeat、数组和带有 id 的对象
【发布时间】：2014-05-26 03:41:06
【问题描述】：

我有一组项目，我正在使用 ng-repeat 和过滤。

每个项目都有一个唯一的 Id，并存储在一个数组中：

[ {id: 387, name: "hello"}, {id: 2878, name: "world"}, ...]

但现在我需要通过它们唯一的 id 而不是数组索引来引用这些对象（以及使用带有过滤器的 ng-repeat）。

所以我尝试使用稀疏数组：

array[387] = {name: "hello"}; array[2878] = {name: "world"}...

但是 ng-repeat 会自欺欺人，因为它看到了“重复”的未定义键。（我也尝试使用 'track by' 但 ng-repeat 仍然不喜欢它）。

我不能使用带有 ng-repeat 的对象，因为过滤器不起作用。

太好了，我怎样才能既使用 ng-repeat 和过滤器，又能够通过 id 引用项目？我能想到的唯一选择是拥有第二个数据结构来将 id 映射到索引。

感谢您的帮助！

克里斯。

【问题讨论】：

你引用这些是为了什么？通常你会将控件放在ng-repeat 的inside 中，然后你会拥有这些调用点击事件并传入重复变量。您是否有一个没有意义的场景？
您打算如何使用具有唯一 ID 的数组？

标签： arrays angularjs data-structures angularjs-ng-repeat ng-repeat

【解决方案1】：

试试这个：

'按 $index 跟踪'

ng-repeat="name in Lists track by $index"

【讨论】：

【解决方案2】：

当我需要完成这类事情时，我会对抓取的数据进行一些快速预处理，并创建必要的查找。例如：

var data = [
    { id: 55, name: 'some name' },
    { id: 65, name: 'another name' }
];

// create a lookup
var lookup = {};
angular.forEach(data, function(item){
    lookup[data.id] = item;        
});

您可以在此处以任何您想要的方式操作数据，但是通过引用实际的数组项，您可以将数据或查找（或两者）绑定到$scope，并且任何更改都将显示在两个结构上。请记住，如果您从数组中添加/删除项目，则不会发生这种情况，因为您需要管理查找中项目的添加和删除。

【讨论】：

【解决方案3】：

我可以看到你的 id 是整数。角度过滤器不起作用，因为角度使用数字字符串比较。

转到 angular.js 搜索函数名称filterFilter。 v1.2.10 的第 13991 行。然后你可以在你的 ng-repeat 中使用对象。

function filterFilter() {
  ...

  var search = function(obj, text){
  if (typeof text == 'string' && text.charAt(0) === '!') {
    return !search(obj, text.substr(1));
  }
  switch (typeof obj) {
    case "boolean":
    case "number": // <-- here
                   // add return obj === text;
    case "string":
      return comparator(obj, text);
    case "object":
      switch (typeof text) {
        case "object":
          return comparator(obj, text);
        default:
          for ( var objKey in obj) {
            if (objKey.charAt(0) !== '$' && search(obj[objKey], text)) {
              return true;
            }
          }
          break;
      }
      return false;
    case "array":
      for ( var i = 0; i < obj.length; i++) {
        if (search(obj[i], text)) {
          return true;
        }
      }
      return false;
    default:
      return false;
  }
};

【讨论】：