Javascript 如何在AngularJS中处理和显示对象数组_Javascript_Arrays_Angularjs_Node Webkit

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

javascript arrays angularjs

Javascript 如何在AngularJS中处理和显示对象数组,javascript,arrays,angularjs,node-webkit,Javascript,Arrays,Angularjs,Node Webkit,我有大量的对象需要过滤、处理，然后显示给最终用户。该应用程序是在节点webkit的基础上开发的，我使用AngularJS，jQuery进行路由、DOM操作等以下是状态： .state('foo.bar', { url: '/fooBar', templateUrl: 'js/Modules/FooBar/Templates/FooBar.html', controller: FooBarController, }) angular.module('fooApp').f

我有大量的对象需要过滤、处理，然后显示给最终用户。该应用程序是在

节点webkit

的基础上开发的，我使用

AngularJS

，

jQuery

进行路由、DOM操作等

以下是状态：

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

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

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

对象相关的属性，反之亦然

我曾尝试使用

解析将过滤部分潜入.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（）时，就会出现问题：
.state('foo.bar', {
    url: '/fooBar',
    templateUrl: 'js/Modules/FooBar/Templates/FooBar.html',
    controller: FooBarController,
})

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，我有很多问题，但我尽量做到具体。
首先，很难准确地处理您提出的问题
其次，这不是有效的js：
return {
    fooStuff(FooBarData.fooBarArray): fooStuff,
    BarStuff(FooBarData.fooBarArray): barStuff
}

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

您可以轻松地调整此模式，以便在解析中使用。希望能有帮助
.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>


食物项目
{{foo.fooName}
酒吧用品
{{bar.fooName}