如何处理和显示 AngularJS 中的对象数组

Question

我有一大堆对象需要过滤、处理然后显示给最终用户。该应用程序是在 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;
        }
    }
})

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

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}}吗？

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

Answer 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>

如何处理和显示 AngularJS 中的对象数组

How to process and display an array of objects in AngularJS

javascript

arrays

angularjs

node-webkit