шоу JSON комплекс строка в нг-сетки

Question

У меня есть веб-сервис, который строит строку JSON, как это:

JavaScriptSerializer j = new JavaScriptSerializer(); 
return "[" + string.Join(",", v.getProbingJobs().Select(a => j.Serialize(a)).ToArray()) + "]"; 

(getProbingJobs является Entity Framework функция извлечения данных из хранимой процедуры)

Это Веб-сервис потребляется через AngularJS (метод $ http.get). Я хочу показать строку JSON в ng-сетке в столбцах. вместо этого он показывает ng-сетку с одним столбцом, и каждая строка (ячейка) показывает символ из строки JSON.

Моя JSON строка строится так:

"[{\"visualid\":\"35422064B1181\",\"operator\":\"ishashua\",\"Step\":\"Probe\",\"Eqiument\":\"LTM3538\",\"Last_Step_Start_Time\":\"\\\/Date(1406725260000)\\\/\",\"Job_Name\":\"P0 minVcc (UNIT 35422064B1181)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Event\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Closed\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00670\",\"operator\":\"mfridma1\",\"Step\":\"Probe\",\"Eqiument\":\"ES4003\",\"Last_Step_Start_Time\":\"\\\/Date(1406732400000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0670)\",\"Event_Type\":\"11 Other\",\"Event_Name\":\"07 Unit Cracked\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"},{\"visualid\":\"3E408261B00931\",\"operator\":\"kgitelmk\",\"Step\":\"Probing\",\"Eqiument\":\"LVX503\",\"Last_Step_Start_Time\":\"\\\/Date(1406698980000)\\\/\",\"Job_Name\":\"minVcc post BI (UNIT 0931)\",\"Event_Type\":\"\",\"Event_Name\":\"\",\"Job_Status\":\"WIP\",\"Step_Status\":\"Step Started\",\"Job_Pass_Fail\":\"\",\"Job_Success_Indicator_Category\":\"\",\"Job_Success_Indicator_Name\":\"\"}]" 

Answer 1

В общем @Chandermanis комментарий является правильным. Но у вас также есть поле Last_Step_Start_Time, которое содержит функцию DATE() и не будет разрешено.

Вы можете исправить это с помощью в ColumnDefs с CellTemplate и использовать пользовательский фильтр:

cellTemplate: '<div class="ngCellText">{{row.getProperty(col.field) | resolve_date}}</div>' 

Вот фильтр (конечно, можно сделать более изящным):

app.filter('resolve_date', function() { 
    return function(text, length, end) { 
    text = text.substring(6, 19); 
    return Date(text); 
    }; 
}); 

Вот a Plunker

Plz vote @Chandermanis комментарий, потому что это был в основном правильный ответ.

Update:

Что касается вопроса ширина/оберточной:

Это немного сложно достичь, поскольку нг-сетка не является таблицей, но много дивы отображается в виде сетки.

Прежде всего, вы должны установить rowHeight в gridOptions в приличное значение.

Затем вы должны дать каждому столбцу индивидуальную ширину, чтобы он мог отображать самое длинное полное слово.

Последняя вы должны переопределить CSS для ngCellText как это:

.ngCellText.ng-scope{ 
    white-space:normal; 
} 

Вот обновленный Plunker