Question

我的代码就像这样

<div ng-app='myApp' ng-controller="MainCtrl">
 <div ng-repeat="destData in AddressData">
                <div ng-repeat="destData in data">
                    <h4>Destination: </h4>
                    <span>Name: </span>  {{destData.STNAME}}<br />
                    <span>streat: </span> {{destData.STADD1}}<br />
                    <span>city: </span> {{destData.STCITY}}<br />
                    <span>State: </span>  {{destData.STSTAT}}<br />
                    <span>Zip: </span> {{destData.STZIPC}}<br />
                    <span>Country: </span> {{destData.USA}}<br />
                    <span> pick up date: </span>{{destData.PICKDT}}<br />
                </div>
        </div>
 </div>


    angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', '$filter', function ($http, $scope, $filter) {
 $scope.AddressData=[
    {
        "fromData": [
            {
                "STNAME": "NEW",
                "STADD1": "217",
                "STCITY": "GA",
                "STSTAT": "SC",
                "STZIPC": "293",
                "STCNTY": "USA",
                "PICKDT": "09/04/2014"
            }
        ],
        "destData": [
            {
                "STNAME": "NEW",
                "STADD1": "217",
                "STCITY": "GAFFNEY",
                "STSTAT": "SC",
                "STZIPC": "293",
                "STCNTY": "USA",
                "PICKDT": "09/04/2014"
            }
        ]
    }
]
});

一切看起来都没问题。但是角度不显示数据。谁能指出我做错了什么？

Answer 1

这是因为您的地址数据是一个对象的数组，有两个属性，每个属性都是一个单独的元素数组。你的内部ng-repeat也没有正确地反映到父元素，它应该迭代destData而不是'data'：

 <div ng-repeat="destData in AddressData">
                <div ng-repeat="obj in destData">

Here is an updated fiddle that works，但假设在最内层的数组中只有一个元素。

Answer 2

试试这个

<body ng-controller="MainCtrl">
    <div ng-repeat="item in AddressData">
        <div ng-repeat="d in item.destData">
            <h4>Destination: </h4>
            <span>Name: </span> {{d.STNAME}}
            <br />
            <span>streat: </span> {{d.STADD1}}
            <br />
            <span>city: </span> {{d.STCITY}}
            <br />
            <span>State: </span> {{d.STSTAT}}
            <br />
            <span>Zip: </span> {{d.STZIPC}}
            <br />
            <span>Country: </span> {{d.USA}}
            <br />
            <span> pick up date: </span>{{d.PICKDT}}
            <br />
        </div>
    </div>
</body>

这是一个适合你的工作人员 - http://plnkr.co/edit/G9TVmQ8YVgRNC7DAcZuB?p=preview

Answer 3

如果你只需要访问'destData'那么就没有必要循环遍历数组了。此外，您不需要在数组中声明两个属性。您可以将其修改为：

$scope.AddressData={
    "fromData": [
        {  
            "STNAME": "NEW",
            "STADD1": "217",
            "STCITY": "GA",
            "STSTAT": "SC",
            "STZIPC": "293",
            "STCNTY": "USA",
            "PICKDT": "09/04/2014"
        }
      ],        
      "destData": [
        {
            "STNAME": "NEW",
            "STADD1": "217",
            "STCITY": "GAFFNEY",
            "STSTAT": "SC",`
            "STZIPC": "293",
            "STCNTY": "USA",
            "PICKDT": "09/04/2014"
        }
      ]
};

这样可以将所需地址作为

进行访问

            <div ng-repeat="data in AddressData.destData">
                <h4>Destination: </h4>
                <span>Name: </span>  {{data.STNAME}}<br />
                <span>streat: </span> {{data.STADD1}}<br />
                <span>city: </span> {{data.STCITY}}<br />
                <span>State: </span>  {{data.STSTAT}}<br />
                <span>Zip: </span> {{data.STZIPC}}<br />
                <span>Country: </span> {{data.USA}}<br />
                <span> pick up date: </span>{{data.PICKDT}}<br />
            </div>

Answer 4

您的数据结构（AddressData）很奇怪，但也许您无法对其进行更改（如果可以的话，您应该这样做，并且我可以在它清楚地解释之后立即解释你想要的。）

在给定当前数据结构的情况下，您需要执行以下操作以使代码正常工作：

<div data-ng-repeat="data in AddressData">
    <h4>Destination: </h4>
    <span>Name: </span>  {{data.destData[0].STNAME}}<br />
    <span>streat: </span> {{data.destData[0].STADD1}}<br />
    <span>city: </span> {{data.destData[0].STCITY}}<br />
    <span>State: </span>  {{data.destData[0].STSTAT}}<br />
    <span>Zip: </span> {{data.destData[0].STZIPC}}<br />
    <span>Country: </span> {{data.destData[0].USA}}<br />
    <span>pick up date: </span>{{data.destData[0].PICKDT}}<br />
</div>

也就是说，摆脱一个迭代器，并从存储包含实际值的匿名对象的数组的第一个索引中获取数据。（后一部分也是您的数据结构奇怪之一，因为在您的示例中，数组似乎没有任何用途。）

踩下东西，我担心下面的内容更接近你真正想要的东西，假设你也可以控制数据的布局 - 现在你只用一个循环得到源数据和目标数据：

<div data-ng-controller="MainCtrl">
    <div data-ng-repeat="data in AddressData">
        <h4>From: </h4>
        <span>Name: </span>  {{data.fromData.STNAME}}<br />
        <span>streat: </span> {{data.fromData.STADD1}}<br />
        <span>city: </span> {{data.fromData.STCITY}}<br />
        <span>State: </span>  {{data.fromData.STSTAT}}<br />
        <span>Zip: </span> {{data.fromData.STZIPC}}<br />
        <span>Country: </span> {{data.fromData.USA}}<br />
        <span>Pick up date: </span>{{data.fromData.PICKDT}}<br />

        <h4>Destination: </h4>
        <span>Name: </span>  {{data.destData.STNAME}}<br />
        <span>streat: </span> {{data.destData.STADD1}}<br />
        <span>city: </span> {{data.destData.STCITY}}<br />
        <span>State: </span>  {{data.destData.STSTAT}}<br />
        <span>Zip: </span> {{data.destData.STZIPC}}<br />
        <span>Country: </span> {{data.destData.USA}}<br />
        <span>Pick up date: </span>{{data.destData.PICKDT}}<br />
    </div>
</div>

<script>
    function MainCtrl($scope) {
        $scope.AddressData = [
            {
                "fromData":
                    {
                        "STNAME": "NEW",
                        "STADD1": "217",
                        "STCITY": "GA",
                        "STSTAT": "SC",
                        "STZIPC": "293",
                        "STCNTY": "USA",
                        "PICKDT": "09/04/2014"
                    }
                ,
                "destData":
                    {
                        "STNAME": "NEW",
                        "STADD1": "217",
                        "STCITY": "GAFFNEY",
                        "STSTAT": "SC",
                        "STZIPC": "293",
                        "STCNTY": "USA",
                        "PICKDT": "09/04/2014"
                    }

            }
        ];
    }
</script>

（当然，如果您只有一组源和目标数据，则根本不需要任何迭代。）

修改：更改了第一个示例，以反映OP对原始问题中代码所做的更改。

（另外，我现在从回应其他建议的解决方案的评论中看到，OP只对destData的值感兴趣。但是，我保留了第二个代码块，未提取数据来自fromData，我认为这部分可能仍然有助于进一步说明如何访问数据。）

无法在JsonData AngularJS上进行循环

4 个答案: