Question

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

Json Obj

[  
   {  
      "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

Answer 2

你可以尝试使用stringify（）然后它会逃脱所有的“/"...

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

检查此链接...

http://speakingjs.com/es5/ch22.html

JSON解析器不能与Angular ng-repeat一起使用

2 个答案: