2015-07-19 3 views
0

Я binding json data в ng-table используя angular jsкак исправить положение элементов таблицы угловых Js

если значение равно нулю, то позиции для всех столбцов становится беспокоить может любой помочь мне исправить данные с колонки заголовок?

посмотреть plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description должны быть null, но все значения смещенный влево.

Or 
If all values are null for any property hide that particular column 
+1

как об этом http://plnkr.co/edit/GcO0Laa4bvd9EeAsXMv7?p=preview? –

+1

AFAICS: просто удалите все ваши ng-if-check на == '' || == null. –

+0

@PankajParkar make Id null structure идет не так :(см. Http://plnkr.co/edit/YjGPSy2uyqPC1NJhJvm4?p=preview – Neo

ответ

1

Для того, чтобы определить, является ли столбец пуст вам нужно какое-то конфигурации столбца, который получает созданный переборе данные, чтобы увидеть, если все строки содержат данные для любого из заголовков (клавиши объекта) ,

Затем вы можете использовать этот массив конфигурации столбцов в качестве повторителя для <th> и <td>.

Пример конфигурации:

[ 
    { 
    "heading": "Id", 
    "display": true 
    }, 
    { 
    "heading": "Title", 
    "display": true 
    }, 
    { 
    "heading": "Description", 
    "display": true 
    }, 
    { 
    "heading": "Test", 
    "display": false 
    } 
] 

HTML

<thead> 
    <tr> 
     <th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="item in data"> 
     <td ng-repeat="col in colConfig" ng-if="col.display"> 
     {{item[col.heading]}} 
     </td> 
    </tr> 
    </tbody> 

Пример конфигурации создать

var keys = Object.keys(data[0]); 

    function createConfig() { 
     var validKeyCounts = {}; 
     var colConfig; 
     keys.forEach(function (key) { 
      validKeyCounts[key] = 0; 
     }) 
     data.forEach(function (row, idx) { 
      keys.forEach(function (key) { 
       if (row.hasOwnProperty(key) && row[key] !== null) { 
        validKeyCounts[key]++; 
       } 
      }) 
     }); 

     colConfig = keys.map(function (key) { 
      return { 
       heading: key, 
       display: validKeyCounts[key] > 0 
      } 
     }); 
     return colConfig 

    } 

Я уверен, что это может быть оптимизирован, но это просто способ, чтобы начать работу с функциональностью требуется

DEMO

+0

Я генерирую все html динамически, так как вы можете видеть html-код, так как я могу указать конфигурацию? есть ли способ обновить текущий код? – Neo

+1

Не понимаю. Это создает html динамически с помощью 'ng-repeat' – charlietfl

+0

I knw, но у меня есть вложенная сетка, также проверьте этот plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview – Neo

Смежные вопросы