Смарт-таблица Angularjs не работает для динамических данных

У меня есть ситуация, когда я использую смарт-таблицу angularJs для фильтрации.

HTML:

<section class="main" ng-init="listAllWorkOrderData()">
    <table st-table="listWorkOrderResponse">
     <thead>
            <tr>
                <th st-sort="id">ID <i></i></th>
                <th st-sort="project">Project <i></i></th>
            </tr>
     </thead>
     <tbody ng-repeat="workOrder in listWorkOrderResponse">
             <tr>
                <td>{{workOrder.id}}</td>
                <td>{{workOrder.project}}</td>
             </tr>
             <tr>
                <td></td>
             </tr>
     </tbody>
    </table>
</section>

Я тестирую для 2 разных случаев.

В моем контроллере сначала я вызываю ту же функцию, но отправляю фиктивный массив, а во втором случае я отправляю массив, полученный из вызова API.

1. Dummy data


$scope.listAllWorkOrderData = function () {
     var listWorkOrderResponse = [{"id":"1","project":"project1"},{"id":2,"project":"project2"},{"id":"3","project":"project3"}];
    }

2. I am using a service and fetching data through api.

        $scope.listAllWorkOrderData = function () {
                    TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
                        if (response != undefined && response != null) {
                            if (!$scope.listWorkOrderResponse) {
                                $scope.listWorkOrderResponse = [];
                            }
                            $scope.listWorkOrderResponse = response;
     }, function (response, status, headers, config) {
                        console.log(response);
                    });

Когда я использую case1, сортировка работает нормально. Но когда я использую case2, сортировка не работает. При нажатии на нее данные просто исчезают. Я попытался отладить, чтобы увидеть, вызывается ли функция listAllWorkOrderData снова, когда мы нажимаем на фильтр. Но она вызывается только один раз, когда страница загружается для заполнения таблицы. Это означает, что данные присутствуют в listWorkOrderResponse. Тогда почему не сортирует?

Я проверил ответ для обеих ситуаций, распечатав их. Единственное отличие, которое я обнаружил, заключалось в том, что к listWorkOrderResponse, который исходит от вызова API, добавлено $$hashKey: "object:363".

Может ли кто-нибудь указать мне, какую ошибку я делаю.


javascript angularjs smart-table
person Yasmeen    schedule 10.09.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Мне удалось решить эту проблему с помощью атрибута stSafeSrc.

В контроллер добавляем

    $scope.listAllWorkOrderData = function () {
                TestService.listAllWorkOrderData().then(function (response, status, headers, config) {
                    if (response != undefined && response != null) {
                        if (!$scope.listWorkOrderResponse) {
                            $scope.listWorkOrderResponse = [];
                        }
                        $scope.listWorkOrderResponse = response;
                        // we add one more list.
                        $scope.displayedWOList = [].concat($scope.listWorkOrderResponse);
 }, function (response, status, headers, config) {
                    console.log(response);
                });

а потом в html таблицу добавляем атрибут stSafeSrc.

Атрибут stSafeSrc из документа Smart Table http://lorenzofox3.github.io/smart-table-website/

Атрибут stSafeSrc

Если вы вводите данные асинхронно (из удаленной базы данных, конечной точки покоя, вызова ajax и т. д.), вы должны использовать атрибут stSafeSrc. Вы должны использовать отдельную коллекцию как для базовой, так и для безопасной коллекций, иначе вы можете получить бесконечный цикл.

<section class="main" ng-init="listAllWorkOrderData()">
        <table st-table="displayedWOList" st-safe-src="listWorkOrderResponse">
         <thead>
                <tr>
                    <th st-sort="id">ID <i></i></th>
                    <th st-sort="project">Project <i></i></th>
                </tr>
         </thead>
         <tbody ng-repeat="workOrder in displayedWOList">
                 <tr>
                    <td>{{workOrder.id}}</td>
                    <td>{{workOrder.project}}</td>
                 </tr>
                 <tr>
                    <td></td>
                 </tr>
         </tbody>
        </table>
    </section>
person Yasmeen    schedule 11.09.2015

arrow_upward
0
arrow_downward

Почему это не работает, я не знаю, но вы можете решить это, выполнив следующие действия.

повторите свой ответ и создайте новый объект и поместите его в массив.

var res = [];
for(var i=0; i<response.length; i++) {
    var x = {"id":response[i].id, "project":response[i].project};
    arr[i] = angular.copy(x);
}
person Manikanta Reddy    schedule 10.09.2015
comment
Да, но в этом ответе мы удаляем $$hashkey - person Manikanta Reddy; 10.09.2015
comment
Я не знаю, почему это произошло. Но такая же проблема случилась и у меня. - person Manikanta Reddy; 10.09.2015
comment
в порядке. Дело в том, что для удаления $$hashkey из каждой строки теперь мне нужно повторять этот ответ так много раз. Целесообразно ли это? - person Yasmeen; 10.09.2015
comment
Если вы нашли какое-либо другое решение, просто оставьте его URL-адрес. это также поможет мне научиться - person Manikanta Reddy; 10.09.2015
comment
Я разместил решение, посмотрите, поможет ли оно вам. - person Yasmeen; 11.09.2015