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时，我只会显示与{{1}对象相关的属性反之亦然。

我尝试使用foo在 .state 中隐藏过滤部分，但之后我不知道如何访问它们。因此， .state 将如下所示：

resolve

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

.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;
        }
    }
})

我应该通过创建新副本来检索过滤后的对象吗？我觉得我太复杂了。如果您同意，我该怎么办呢？
我应该使用 FooBarController （在发言时为空）而不是 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 } });，我会使用fooName吗？

注意：我不认为这篇文章应该提交给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

1 个答案: