如果它是Angular中的json字符串，如何訪問Json對象元素值

Question

我將一些數據庫表列值保留為json字符串，以后再將DB表值作為json對象發送到前端。

[  
   {  
      "jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
      "jobType":"TestExecutionJob",
      "nextRun":"N/A",
      "lastRun":"2015-11-26 13:26:10.664",
      "createdDate":"2015-11-26 13:26:10.664",
      "executor":"sam",
      "JobDetails":"{\"environment\":\"AA\",\"EmailRecipients\":[\"sam.sam11@gmail.com\"],\"extraParams\":{\"FileName\":\"myTest.xml\"}}",
      "status":"active",
      "elapsedTime":"18 minutes ago"
   }
]

我已經嘗試過angularJs ng-repeat但沒有任何顯示。請讓我知道如何訪問JobDetails值。（環境，EmailRecipients和FileName）

<ul><li ng-repeat="t in row.entity.JobDetails">{{t.environment}}</li></ul>

Js文件

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

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

                var Plantemplate ='<div><ul><li ng-repeat="t in row.entity.JobDetails">{{t.FileName}}</li></ul></div>';

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

                    groupsCollapsedByDefault : true,


                    enablePinning : true,
                    columnDefs : [ {
                        field : 'jobId',
                        displayName : 'jobId',
                        visible : false
                    },  {
                        field : 'JobDetails',
                        displayName : 'Plan Name',
                        cellTemplate : Plantemplate,
                        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.EmailRecipients',
                        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();
                }

            });

的HTML

<div ng-controller="tepTableCtrl">
    <div  ui-grid="tableData" class="grid"></div>
 </div>

Answer 1

首先將字符串解析為對象，然后使用它

<script>
 var app = angular.module('myApp', []);
    app.controller('myCtrl', ['$scope', function($scope) {

     $scope.json = [  
         {  
            "jobId":"efe0ace0-8ed9-45ff-9232-974cbdc89b86",
            "jobType":"TestExecutionJob",
            "nextRun":"N/A",
            "lastRun":"2015-11-26 13:26:10.664",
            "createdDate":"2015-11-26 13:26:10.664",
            "executor":"sam",
            "JobDetails":"{\"environment\":\"AA\",\"EmailRecipients\":[\"sam.sam11@gmail.com\"],\"extraParams\":{\"FileName\":\"myTest.xml\"}}",
            "status":"active",
            "elapsedTime":"18 minutes ago"
         }
      ].map(function(value){
         value.JobDetailParse = JSON.parse(value.JobDetails);
         return value;
      })

    }]);

</script>

HTML：

<div ng-repeat = "t in json">
    {{t.JobDetailParse.environment}}
  </div>

Answer 2

為什么不解析數據，IE將其從字符串轉換為對象？

newObj = JSON.parse(yourString);

然后在其上使用ng-repeat。