Question

我正在尝试找到将大型JSON对象转换为视图模型的最佳方法。以前，我将模型合并到视图中，这是一种不好的做法。所以，现在我在控制器内部生成了模型。我使用Lodash作为实用程序库。

我目前的设计方案是将JSON对象转换为可在控制器范围内访问的“主”数组。 Express为JSON文件提供服务。 ModelService只是获取此文件以使其在控制器中可用。

$scope.arr是我想在视图中使用的“主”数组。

我还将JSON数据提供给外部链接查看，因为它太大了。 Here it is

(function() {
    'use strict';

    angular
        .module('app')
        .controller('ModelController', ModelController);

    function ModelController($scope, ModelService, _) {
        $scope.jsonData = ModelService.getAll();

        $scope.getData = function() {
            $scope.jsonData.$promise.then(function(data) {
                $scope.all = data;
                $scope.arr = [];
                _.mapValues($scope.all.parent1.clusters, function(cluster) {
                    $scope.arr.push(cluster.name);
                    _.mapValues(cluster.subclusters, function(subcluster) {
                        $scope.arr.push(subcluster.name);
                        _.mapValues(subcluster.entities, function(entity) {
                // map entities
                        })
                    });
                });
            });
        };

        $scope.getData();
    }
})();

此代码只是将cluster和subcluster名称添加到数组中。我希望子群集映射到它们的父群集。我这样做的想法包括将每个cluster元素转换为自己的数组，然后添加子集合，然后将每个子集群转换为数组，以便将实体映射到它们。这似乎乏味且低效。所以，我正在寻找一种更好的方法来实现这一目标。

如果我能够一举将每个集群对象添加到数组中而没有所有映射并将对象转换为数组，那将是很好的。这有可能吗？

线框视图看起来像this。 Flex群集标题是subcluster的名称，其中的每个数字都是entity。

Answer 1

首先，我会将此处理转移到服务中。它更容易测试，并使您的视图与模型分离（控制器，实际上更多的是＆＃34; View＆＃34; IMO，当涉及到Angular时，特别是如果您正在考虑升级到未来的Angular 2.0。

在Angular中，我认为解决这个问题的合适方法是使用与ng-repeat结合的组件（或指令）。

页面模板：

<!-- Page template, assume $ctrl is your controller, $ctrl.clusters is the data -->
<cluster ng-repeat = "cluster in $ctrl.clusters"
         cluster-data="cluster" >
</cluster>

群集指令模板：

<!-- Assume $ctrl is the controller for the cluster directive, $ctrl.cluster is the cluster object. -->
<div class="name">{{$ctrl.cluster}}</div>
<div class="subClusterNames" 
     ng-repeat="subCluster in $ctrl.cluster.subClusters>
     {{subCluster.name}}
</div>

您可能认为这会将您的数据与视图过于贴切，但只要您使用组件来显示数据（即，不要将其全部放入一个模板中）我觉得你没事。

Lodash＆amp; Angular：将JSON对象转换为视图模型

1 个答案: