2017-02-14 7 views
0

Я превратил мой Items массив в индексированный объектах с использованием underscorejs:Угловой смарт-таблица не делает коллекцию на основе списка объектов

$scope.items = _.indexBy($scope.items, 'id'); 

А теперь мои пункты выглядит следующим образом:

$scope.items = { 
    "1": { 
     id: 1, 
     name: "Tizio" 
    }, 
    "2": { 
     id: 2, 
     name: "Caio" 
    }, 
    "3": { 
     id: 3, 
     name: "Sempronio" 
    }, 
    }; 

It это то, что мне нужно.

Теперь мне нужно показать свои элементы в таблице, и я бы хотел использовать плагин, который поможет мне сортировать, разбивать на страницы, легко фильтровать мои данные, поэтому я начал использовать angular-smart-table. Известный и общий один ...

Я последовал за документацию и окончательный HTML выглядит следующим образом:

<table st-safe-src="items" st-table="rowItems"> 
    <tr> 
    <th>id</th> 
    <th>name</th> 
    </tr> 
    <tr ng:repeat="item in rowItems track by item.id"> 
    <td>{{item.id}}</td> 
    <td>{{item.name}}</td> 
    </tr> 
</table> 

К сожалению, это не показывать мои данные. Я попытался удалить смарт-таблицу, и она отлично работает в общей таблице.

Как я могу позволить этому работать? Что я делаю неправильно? Если смарт-таблица не поддерживает список объектов, знаете ли вы лучший плагин, который должен лучше соответствовать моим потребностям?

Here a JsFiddle about it.

Благодаря

ответ

0

Я не был уверен, что вы пытаетесь сделать с [].concat(OBJECT), поэтому я изменил способ преобразования из объекта в массив с помощью Object.keys и map.

Вы можете проверить обновленный jsfiddle: https://jsfiddle.net/qfpyu1kL/2/

// Initial values converted to array 
    $scope.rowItems = Object.keys($scope.items).map(function(key) { 
    return $scope.items[key]; 
    }); 

    $timeout(function() { 
    // Add new values 
    $scope.rowItems.push({ id: 4, name: 'OTHER1' }); 
    $scope.rowItems.push({ id: 5, name: 'OTHER2' }); 
    }, 1000); 

Я видел, что вы использовали stSafeSrc, что означало, что вы ожидали асинхронные данные, вот почему я добавил $ таймаут.

Я также обновил HTML, чтобы установить rowItems в атрибуте st-safe-src и st-table в displayedCollection.

+0

Ну, в основном вы конвертировали обратно индексированный список в массив Array ... Достаточно справедливо. Спасибо за ответ и решение –

+0

Здравствуйте, еще раз, рассмотрев код лучше, я обнаружил, что через несколько секунд он генерирует бесконечный цикл дайджеста. Специально, поскольку я добавил 'rowItems' в' st-safe-src' ... –

+0

Обновлен jsfiddle, просто переименуйте атрибут 'st-table' и используйте это новое имя в' ng-repeat'. – Canastro