json中的ng-repeat和嵌套数组

时间:2014-06-13 15:04:25

标签: arrays json angularjs ng-repeat

我在使用指令ng-repeat访问存储在json中的某些值时遇到了一些问题。

json格式正确(用json检查器检查),并通过$ http服务调用它。不幸的是,我无法通过wordpress-json-api插件更改json的格式。

json(有一些削减):

    {
    "status": "ok",
    "count": 10,
    "count_total": 24,
    "pages": 3,
    "posts": [
        {
            "id": 108,
            "type": "sensor",
            "slug": "ert",
            "custom_fields": {
                "sensor_id": [
                    "er"
                ],
                "coords": [
                    "{\"address\":\"\",\"lat\":55.39979700000003,\"lng\":10.430533275390644,\"zoom\":12}"
                ]
            }
        }

        //etc other posts following, json correct

现在我在访问coords中的单个值时遇到问题。我抱怨在数据库中序列化数据,但我还是希望从阵列中获取lng和lat

    <ul>
    <li ng-repeat="post in sensor.posts">
        <h4>name : {{post.id}}</h4> //ok
        <h4>all custom fields : {{post.custom_fields}}</h4> //good-this-too
        <h4>custom field lat : {{post.custom_fields.prova_coords[0]}}</h4> //works but can't go on
    </li>

</ul>

最后一行的输出是:

custom field lat : {"address":"","lat":55.39979700000003,"lng":10.430533275390644,"zoom":12}

但现在我卡住了......无法检索单个纬度和长值

1 个答案:

答案 0 :(得分:1)

您需要使用$scope.$eval(coordsString)

以下是测试:http://jsfiddle.net/mikeeconroy/Rnc7R/

var objString = "{\"address\":\"\",\"lat\":55.39979700000003,\"lng\":10.430533275390644,\"zoom\":12}";

$scope.coords = $scope.$eval(objString);

然后您可以在模板中引用coords.latcoords.lng,如下所示:

<div ng-controller="myCoordsCtrl">
    Lattitude: {{coords.lat}}<br>
    Longitude: {{coords.lng}}
</div>

由于这是在ngRepeat内发生的,您可能需要使用角度过滤器来动态纠正字符串

<li ng-repeat="post in sensor.posts | myRectifyCoordsFilter">

修改

请勿使用上述示例中的过滤器,使用过滤器修改$scope并不是一个好的情况。在$scope

中使用ng-repeat之前,您需要修改$http.get().success(function(data){ angular.forEach(data,function(val,key){ this.coords = $scope.$eval(val.coords[0]); },data); $scope.sensor = data; });
{{1}}