如何在Angular中输出特定的嵌套JSON对象？

Question

我是Angular的新手，并且正尝试将基于jQuery的旧应用程序移植到NG。 我开始使用的JSON（从XML文件解析）如下所示：

{
    "setUps":{
        "cartImage":
        {
            "_cartIm":"addtocart.gif",
            "_cartIm_o":"addtocart.gif"
        }
        ,"_supportImsPath":"/"
    },
    "product":
    {
        "matrix":
        {
            "thumbnails":[
                {
                    "_myLabel":"Antique Brass Distressed",
                    "_thumbImage":"3",
                    "_cartCode":"160"
                },
                {
                    "_myLabel":"Antique Brass Light",
                    "_thumbImage":"156",
                    "_cartCode":"156"
                },
                {
                    "_myLabel":"Old Iron",
                    "_thumbImage":"ap",
                    "_cartCode":"157"
                },
                {
                    "_myLabel":"Oil-Rubbed Bronze",
                    "_thumbImage":"ob",
                    "_cartCode":"3"
                }
            ],
            "_myLabel":"Finishes"
        },
        "_Title":"Flower Cabinet Knob",
        "_itNum":"100407x"
    }
}

我需要做的是在模板上输出特定的元素-首先，首先是矩阵对象及其关联的缩略图。 在此示例中，只有一个矩阵，但是对于许多产品而言，都有多个矩阵，每个矩阵都有自己的缩略图数组。

这是控制器：

var XMLt = angular.module("XMLtest",[]);
XMLt.factory("Xfactory",function($http){
    var factory = [];
    factory.getXML = function(){
        return $http.get(productXML);
    }
    return factory;
});

XMLt.controller("Xcontroller",function($scope,Xfactory) {
    $scope.Xcontroller = [];
    loadXML();
    function loadXML() {
        Xfactory.getXML().success(function (data) {
            var x2js = new X2JS();
            prodData = x2js.xml_str2json(data);
            $scope.thisItem = prodData.contents;
            $scope.matrices = [];
            angular.forEach($scope.thisItem.matrix,function(value,key)
            {
                $scope.matrices.push(value,key);
            });
        });
    }
});

这是我的视图模板：

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div ng-repeat="thisMatrix in thisItem.product" class="matrix">
        {{ thisMatrix._myLabel }}
    </div>
</div>

我的问题是，毫不奇怪，此ng-repeat会为找到的产品的每个子元素返回一个div，而不仅仅是矩阵。 因此，除了矩阵div之外，我还有几个空div（用于_Title和_itNum）。

我已经看到了很多通过比较值文字进行过滤的示例，但在这种情况下它们似乎并不适用。 我还尝试编写自定义过滤器：

$scope.isObjType = function(input) {
    return angular.isObject(input);
};

<div ng-repeat="thisMatrix in thisItem.product | filter:isObjType(matrix)">

这似乎没有任何效果，但仍然返回了无关的div。 我似乎无法确定如何将重复限制为特定对象类型。 我在想这是完全错误的方式吗？ 如果是这样，我欢迎您提出任何意见。

Answer 1

由于您只有一个矩阵，因此矩阵标签不需要重复。 您只需要缩略图即可。

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div class="matrix">
        {{ thisItem.product.matrix._myLabel }}
        <div ng-repeat="thisThumbnail in thisItem.product.matrix.thumbnails" class="thumbnail">           
            {{thisThumbnail._myLabel}}
        </div>
    </div>
</div>

如果可能有多个矩阵，则需要修改该对象以使其能够表示（通过将矩阵对象包装在数组中）。

每个评论的更新：

如果您有多个矩阵的可能，则需要修改对象以确保当存在1与存在2+时对象保持一致。

<div ng-controller="Xcontroller">
    <h2>Title: {{ thisItem.product._Title }}</h2>
    <div ng-repeat="thisMatrix in thisItem.product.matrix" class="matrix">
        {{ thisMatrix._myLabel }}
        <div ng-repeat="thisThumbnail in thisMatrix.thumbnails" class="thumbnail">           
            {{thisThumbnail._myLabel}}
        </div>
    </div>
</div>

并在控制器中：

XMLt.controller("Xcontroller",function($scope,Xfactory) {
    $scope.Xcontroller = [];
    loadXML();
    function loadXML() {
        Xfactory.getXML().success(function (data) {
            var x2js = new X2JS();
            prodData = x2js.xml_str2json(data);
            // must always have an array of matrixes
            if (!prodData.contents.product.matrix.slice) {
                prodData.contents.product.matrix = [prodData.contents.product.matrix];
            }
            $scope.thisItem = prodData.contents;
            $scope.matrices = [];
            angular.forEach($scope.thisItem.matrix,function(value,key)
            {
                $scope.matrices.push(value,key);
            });
        });
    }
});