如何在 AngularJS 中处理和显示对象数组答案

【问题标题】：How to process and display an array of objects in AngularJS如何在 AngularJS 中处理和显示对象数组
【发布时间】：2015-05-15 14:51:28
【问题描述】：

我有大量对象需要过滤、处理然后显示给最终用户。该应用程序是在node-webkit 之上开发的，我使用AngularJS、jQuery 进行路由、DOM 操作等。

这是.state：

.state('foo.bar', {
    url: '/fooBar',
    templateUrl: 'js/Modules/FooBar/Templates/FooBar.html',
    controller: FooBarController,
})

FooBarData.js 包含对象的大数组：

angular.module('fooApp').factory('FooBarData', function () {
    var fooBarArray = [{
        source: "foo",
        id: 'foo_1',
        pid: 'fooBar_1',
        number: 550,
        fooSign: "ASD",
        fooName: "XCV",
        url: "../foo/bar.fbr",
        aFlag: false
    }, {}, {}, ];
}

我卡在哪里了？好吧，source 属性是 foo 或 bar，我将在两个视图之间切换：当我按下 foo 时，我将只显示与 foo 对象相关的属性，反之亦然。

我曾尝试使用resolve 将过滤部分隐藏在 .state 中，但之后我不知道如何访问它们。因此，.state 看起来像这样：

.state('foo.bar', {
    url: '/fooBar',
    templateUrl: 'js/Modules/FooBar/Templates/FooBar.html',
    controller: FooBarController,
    resolve: {
        Foo: function (FooBarFactory, FooBarData) {
            var fooArray = [];
            $.each(FooBarData, function (index, value) {
                if (value.filter == 'foo') {
                    var aFoo = new FooBarFactory.FooStuff(value);
                    fooArray.push(aFoo);
                }
            });
            return fooArray;
        },
        Bar: function (FooBarFactory, FooBarData) {
            var barArray = [];
            $.each(FooBarData, function (index, value) {
                if (value.filter == 'bar') {
                    var aBar = new FooBarFactory.BarStuff(value);
                    barArray.push(aBar);
                }
            });
            return barArray;
        }
    }
})

当我尝试从 FooBarFactory 实例化（然后访问）FooStuff() 和 BarStuff() 时出现问题：

angular.module('fooApp').factory('FooBarFactory', function ($scope) {

    var fooStuff = function (foo) {
        this.source = foo.source;
        this.id = foo.id;
        this.pid = foo.pid;
        this.number = foo.number;
        this.fooSign = foo.fooSign;
        this.fooName = foo.fooName;
        this.url = foo.url;
        this.aFlag = foo.flag;
    };

    /*var barStuff = function (bar)
        same thing here*/ 

    return {
        fooStuff(FooBarData.fooBarArray): fooStuff,
        BarStuff(FooBarData.fooBarArray): barStuff
    }
});

我应该通过创建新的副本来检索过滤的对象吗？我觉得我把事情复杂化了太多。如果你同意，我应该怎么做？
我应该使用 FooBarController（在发言时为空）而不是 FooBarFactory？如果是，访问对象的过程是否相同？
如果我需要显示，例如一个对象的属性fooName，我会使用{{FooBarFactory.fooStuff.fooName}}吗？

注意：我认为这篇文章不应该提交给 CodeReview，我有很多问题，但我尽量做到具体。

【问题讨论】：

标签： javascript arrays angularjs node-webkit

【解决方案1】：

首先，很难准确处理您的要求。

其次这是无效的js：

return {
    fooStuff(FooBarData.fooBarArray): fooStuff,
    BarStuff(FooBarData.fooBarArray): barStuff
}

在这里编辑我以前的答案。您可以使用 lodash 到其他方法来过滤所有具有“foo”或“bar”键的对象，并将它们添加到某些服务（工厂）中自己的新数组中。然后，您可以在需要时在您的范围内检索它们：

http://plnkr.co/edit/NZkecjcf6cYWa0jQPzqF?p=preview

您也可以轻松调整此模式以用于您的解决方案。希望对您有所帮助。

.controller('MainController', function($scope, Processor, FooBarData) {
  var foos = Processor.process(FooBarData.data, 'foo');
  var bars = Processor.process(FooBarData.data, 'bar');
  $scope.foos = Processor.getData('foo');
  $scope.bars = Processor.getData('bar');
})

.factory('Processor', function () {

    var p = {};
    p.data = {
      foo: [],
      bar: []
    };

    p.process = function(data, keyword){
      p.data[keyword].push(_.filter(data, {source: keyword}));
    }

    p.getData = function(name){
      return _.flatten(p.data[name]);
    }

    return p;
})

当然还有你的模板：

  <body ng-controller="MainController">
    <h1>FOO items</h1>
    <p ng-repeat="foo in foos"> {{ foo.fooName }}</p>

   <h1>Bar items</h1>
    <p ng-repeat="bar in bars"> {{ bar.fooName }}</p>
  </body>

【讨论】：