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

时间:2016-09-29 09:23:07

标签: angularjs json ionic-framework

首先,我对离子和棱镜有了新的认识。现在我正在尝试开发一个应用程序,我现在无法显示和搜索数据。

我有一个嵌套的json对象,我无法使用ng-repeat显示它。

这是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"
                        }
                    }]
            }];

以下是我的展示方式。

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

当我将其更改为跟随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"
                    }
                }];

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

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

提前非常感谢你。

3 个答案:

答案 0 :(得分:2)

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

scipy.cluster.hierarchy.linkage

SO代码应如下:

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

答案 1 :(得分:1)

所以你有一个数组然后你正在定义另一个数组,其中一个对象的键是&#39; leadlist&#39;。上面的答案可以解决您的问题,或者您可以删除密钥上方的数组,您可以正常访问它data.nestedTestData

以下是如何重写它的方法:

`$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"
    }  
}]  

};`

答案 2 :(得分:1)

您可以使用嵌套ng-repeat,如果$scope.nestedTestdata中有多个对象,它也可以使用。 Here is working fiddle

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

请删除"leadlist "

之后的空格