javascript - JSON 解析器不适用于 Angular ng-repeat

Question

我正在尝试访问 json obj 并将值设置到 Angular Ui-grid 中。但问题是我的一些 json obj 字段是 json 字符串。我尝试使用 Json.parser 将这些字段转换为 json obt，然后尝试访问。但没有任何内容可以显示，也不会给出任何错误消息。

Json 对象

[  
   {  
      "jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
      "jobType":"TestJob",
      "nextRun":"N/A",
      "lastRun":"2015-11-26 13:26:10.664",
      "createdDate":"2015-11-26 13:26:10.664",
      "executor":"g",
      "JobDetails":"{\"environment\":\"TQ\",\"additionalEmailRecipients\":[\"g.g@gmail.com\"],\"extraParams\":{\"PlanFileName\":\"RestAPI.xml\"}}",
      "status":"active",
      "elapsedTime":"1 day ago"
   }
]

我尝试将 JobDetails 字段转换为单元格模板内的 json obj。

var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

完整的 Js 脚本

'use strict';
var tepTableModule = angular.module('test',
        [ 'ngAnimate', 'ngTouch','ui.grid','ngResource' ]).factory('Service',
        function($resource) {
            return $resource('/api/job/jobs', {});
        });

    tepTableModule
    .controller(
            'tepTableCtrl',
            function($scope, Service) {
                $scope.TestData = Service.query();

        //This doesn't work     
               var testPlantemplate ='<div><ul><li ng-repeat="testPlans in JSON.parse(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

                $scope.tableData = {
                    data : 'TestData',

                    groupsCollapsedByDefault : true,


                    enablePinning : true,
                    columnDefs : [ {
                        field : 'jobId',
                        displayName : 'jobId',
                        visible : false
                    },  {
                        field : 'JobDetails',
                        displayName : 'Test Plan Name',
                        cellTemplate : testPlantemplate,
                        visible : true
                    },
                     {
                        field : 'jobType',
                        displayName : 'JobType',
                        visible : true
                    },
                     {
                        field : 'environment',
                        displayName : 'Environments',
                        visible : true
                    },
                     {
                        field : 'status',
                        displayName : 'Status',
                        visible : true
                    },
                    {
                        field : 'elapsedTime',
                        displayName : 'LastRun',
                        visible : true
                    },
                    {
                        field : 'JobDetails.additionalEmailRecipients',
                        displayName : 'Email Recipients',
                        visible : true
                    },
                    {
                        field : 'executor',
                        displayName : 'Executor',
                        visible : true
                    }
                    ],
                    sortInfo: {
                          fields: ['elapsedTime'],
                          directions: ['desc']
                        },
                    plugins : [ new ngGridAutoRowHeightPlugin() ]
                };

                $scope.changeGroupBy = function(group) {
                    $scope.gridOptions.groupBy(group);
                }
                $scope.clearGroupBy = function() {
                    $scope.gridOptions.$gridScope.configGroups = [];
                    $scope.gridOptions.groupBy();
                }

            });

请告诉我如何访问 ng-repeat 内的 JobDetails 并将其设置到 ui-grid 中。

Answer 1

在作用域中创建方法

$scope.parseJSON=function(strObj){
  return JSON.parse(strObj);
}

然后从模板调用

var testPlantemplate ='<div><ul><li ng-repeat="testPlans in parseJSON(row.entity.JobDetails)">{{testPlans.environment}}</li></ul></div>';

JSFIDDLE