Angular等效于Backbone collection.get

时间:2013-05-27 18:49:59

标签: javascript angularjs

Backbone提供了很好的方法来提取和更新作为集合(对象数组)一部分的单个模型(单个数据集)。

我现在正在学习Angular,并且被绑定,过滤和模板(更喜欢强调)所震惊。它可以轻松完成许多任务。

我正在努力寻找一种简单的方法从一个对象数组中拉出一个对象。从我在线阅读的内容来看,我的选择是在ng-repeat上使用过滤器(这似乎有点奇怪,因为我不是“重复”任何东西,或者拉入jquery并使用$ .grep。另一种方式可能是构建我自己的过滤器或用原始javascript写一些东西。

您将使用哪种方式将单个对象从数组中拉出来?请记住,在Backbone中,集合中的每个对象都具有唯一的“id”属性,而我在Angular中使用与业务数据相同的范例。我宁愿不用jquery或下划线来做那件事。

如果存在Angular方法,请道歉 - 我发现文档导航有点棘手。如果是,请举例说明它的使用情况。非常感谢。

3 个答案:

答案 0 :(得分:2)

在Backbone中,collection.findWhere只委托Underscore的find方法,这非常简单 - 它只是遍历集合,直到遇到与谓词匹配的元素。

我只是写一个辅助函数来做到这一点。例如:

function find(array, attrs) {
  for (var i = 0, len = array.length; i < len; i++) {
    for (var key in attrs) {
      if (array[i][key] !== attrs[key]) {
        break;
      }
      return array[i];
    }
  }
  return null;
}

并使用它:

findFirst(items, {id: 3});

答案 1 :(得分:1)

我建议去w / Lodash - 这是我最喜欢的事情,我们的团队在Sails / Waterline和我们的客户项目中广泛使用它。特别是,请查看_.find()


常用用法

var fluffyTheCat = _.find(cats, { name: 'fluffy' });


实施例

// assuming you've got "$scope.cats"

// you can do nice criteria-based lookups on a per-attribute basis:
_.find($scope.cats, { name: 'fluffy' });

// or do something lower-level:
// (return true to declare a match, false to keep going)
_.find($scope.cats, function (cat) {
  return cat.name.match(/^fluffy/i);
});

文档

来自http://lodash.com/docs#find:

_.find(collection, [callback=identity], [thisArg])

迭代集合的元素,返回回调返回的第一个元素。回调绑定到thisArg并使用三个参数调用; (value,index | key,collection)。

如果为回调提供了属性名称,则创建的&#34; _。pluck&#34;样式回调将返回给定元素的属性值。

如果提供了一个对象来回调所创建的&#34; _。其中&#34;样式回调将对具有给定对象属性的元素返回true,否则为false。


  

另请参阅_.where(),它返回一个匹配数组而不是一个。

答案 2 :(得分:0)

因为我不需要遍历对象中的每个属性,即我知道我只匹配id属性,所以我想出了这个函数,它位于我的控制器中。如果我将$ routeParams.item传递给控制器​​,则调用它。 $ routeParams.item指定我想要掌握的对象的“id”。我将返回值应用于$ scope.dataIs属性,这意味着我现在可以绑定它。

$scope.getDataIs = function(item){
    var dataIs;

    for (i = 0; i < $scope.data.length; i++) {
        if ($scope.data[i]['id'] == item) {
            dataIs = $scope.data[i];
            break;
        }
    }
    return dataIs;
}