Angularjs嵌套json对象，ng-repeat不能在离子上工作

First of all, I'm pretty new to the ionic and angularjs. Now I trying to develop a app and i'm having trouble displaying and searching data right now.

首先，我是离子和棱镜的新手。现在我尝试开发一个应用程序，我现在无法显示和搜索数据。

I have a nested json object and I cannot display it with ng-repeat.

我有一个嵌套的json对象，我不能用ng-repeat显示它。

Here is the json object.

这是json对象。

$scope.nestedTestdata = [{
                "leadlist ": [{
                    "submitted_date": "01-01-2160",
                    "submission_value": {
                        "full_name": "Full Name ",
                        "phone": "This is test data.",
                        "source": "I hate you"
                    }
                },
                    {
                        "submitted_date": "01-01-2015",
                        "submission_value": {
                            "full_name": "full name",
                            "phone": "phone.",
                            "source": "I really really hate you"
                        }
                    },
                    {
                        "submitted_date": "01-01-2016",
                        "submission_value": {
                            "full_name": "I am awesome",
                            "phone": "HP phone.",
                            "source": "I hate you"
                        }
                    }]
            }];

Here is how I display.

这是我的展示方式。

 <div class="lead_row" ng-repeat="data in nestedTestdata.leadlist | filter: model.search" >

            <div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
            <div class="lead_col">{{data.submission_value.source}}</div>
            <div class="lead_col">{{data.submission_value.full_name}}</div>
            <div class="lead_col">{{data.submission_value.phone}}</div>    
        </div>

When I change it to following json object, it can display and search function also working.

当我将其更改为跟随json对象时，它可以显示和搜索功能也工作。

 $scope.testdata = [{
                "submitted_date": "01-01-2160",
                "submission_value": {
                    "full_name": "Search is working",
                    "phone": "This is fucking test data.",
                    "source": "I hate you"
                }
            },
                {
                    "submitted_date": "01-01-2015",
                    "submission_value": {
                        "full_name": "Fucking full name",
                        "phone": "Fucking phone.",
                        "source": "I really really hate you"
                    }
                },
                {
                    "submitted_date": "01-01-2016",
                    "submission_value": {
                        "full_name": "I am awesome",
                        "phone": "Fucking HP phone.",
                        "source": "I hate you"
                    }
                }];

So I think it is not displaying problem. Please help to figure out how can i make this work.

所以我认为它没有显示问题。请帮助弄清楚我该如何做这项工作。

Please check inside the following link for the full code. http://play.ionic.io/app/720567016712

请在以下链接中查看完整代码。 http://play.ionic.io/app/720567016712

Thank you so much in advance.

非常感谢你提前。

3 个解决方案

#1

nestedTestData contains an array. Inside the array, there is an object.

nestedTestData包含一个数组。在数组内部，有一个对象。

ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search"

SO code should be as follows:

SO代码应如下：

 <div class="lead_row" ng-repeat="data in nestedTestdata[0].leadlist | filter: model.search" >
                <div class="lead_col">{{data.submitted_date | date : 'dd-MMM-yyyy'}}</div>
                <div class="lead_col">{{data.submission_value.source}}</div>
                <div class="lead_col">{{data.submission_value.full_name}}</div>
                <div class="lead_col">{{data.submission_value.phone}}</div>    
            </div>

#2

So you have an array then you are defining another array with an object with a key of 'leadlist'. The answer above could solve your problem or you could just remove the array above your key you can just access it as normal data.nestedTestData

所以你有一个数组然后你定义另一个数组，其中一个对象的关键字是'leadlist'。上面的答案可以解决您的问题，或者您可以删除键上方的数组，您可以像普通数据一样访问它.nestedTestData

Below is how you could rewrite it:

以下是如何重写它：

`$scope.nestedTestdata = {
    "leadlist" : [{
        "submitted_date": "01-01-2160",
        "submission_value": {
         "full_name": "Full Name ",
         "phone": "This is test data.",
          "source": "I hate you"  
    }

},
{
    "submitted_date": "01-01-2015",
    "submission_value": {
        "full_name": "full name",
        "phone": "phone.",
        "source": "I really really hate you"
    }
},
{
    "submitted_date": "01-01-2016",
    "submission_value": {
        "full_name": "I am awesome",
        "phone": "HP phone.",
        "source": "I hate you"
    }  
}]

};`

#3

You can use nested ng-repeat, It will also work if there are multiple objects in $scope.nestedTestdata. Here is working fiddle

您可以使用嵌套的ng-repeat，如果$ scope.nestedTestdata中有多个对象，它也可以使用。这是工作小提琴

    <div ng-controller="MyCtrl">
    <div class="lead_row" ng-repeat="data in nestedTestdata">
        <div ng-repeat="list in data.leadlist">
            <div class="lead_col">{{list.submitted_date | date : 'dd-MMM-yyyy'}}</div>
            <div class="lead_col">{{list.submission_value.source}}</div>
            <div class="lead_col">{{list.submission_value.full_name}}</div>
            <div class="lead_col">{{list.submission_value.phone}}</div>
        </div>
    </div>
</div>

please remove the space after "leadlist "

请删除“leadlist”之后的空格

#1