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>

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

每条评论更新：

如果你有多个矩阵的可能性，你需要修改对象，以确保当有2对时，它与1对比。

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

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

1 个答案:

每条评论更新：