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

我是Angular的新手，我正在尝试将一个基于jQuery的旧应用移植到NG。从XML文件解析的JSON如下所示：

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

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

这是我的视图模板：

<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之外，我还为_Title和_itNum添加了两个空div

我见过不少通过比较值文字进行过滤的例子，但它们似乎不适用于这种情况。我还尝试编写自定义过滤器：

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

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

---

这似乎没有效果，仍然返回无关的div。我似乎不知道如何将重复限制在特定的对象类型上。我是不是完全错了？如果是这样，我欢迎任何输入。

因为您只有一个矩阵，所以不需要重复矩阵标签。你只需要它的缩略图

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

---

注：prodData=x2。。。我看不出有什么理由重复，这是造成你的额外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);
            });
        });
    }
});