JSON解析器没有't使用Angular ng repeat

JSON parser doesn't work with Angular ng-repeat

本文关键字:使用 Angular repeat ng JSON      更新时间:2023-09-26

我正在尝试访问json-obj并将值设置到Angular Ui-rid中。但问题是我的一些json-obj字段是json字符串。我尝试使用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网格中。

在作用域中创建一个方法

$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

你能尝试使用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