Is the AngularJS smart-table documentation/demo buggy?

Question

I just don't understand this. On the smart-table web page, where it discusses the stSafeSrc attriubute, I don’t see where $scope. displayedCollection gets declared.

The text says smart-table first creates a safe copy of your displayed collection, and I

I had assumed that a smart-table directive was declaring it, but the sample code won’t work for me – the table rows are empty - and that’s what looks to me to be the problem.

If we look, for instance, at the accepted answer to this question, we see the user declaring $scope.displayedCollection as an empty array and assigning it a value when the AJAX response is received. BUT, the documentation doesn't mention that.

<table st-table="displayedCollection" st-safe-src="rowCollection">
      <thead>
        <tr>
          <th st-sort="firstName">First Name</th>
          <th st-sort="lastName">Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in displayedCollection">
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
        </tr>
      </tbody>
</table


app.controller('Ctrl', function($scope, service) {
    $scope.displayedCollection = [];

    service.all.then(function(list) {
        $scope.rowCollection = list;
        $scope.displayedCollection = list;
    });
});

So, do I need to care for the copy myself? And does the documentaion need to be updated? And how does the demo work?

[Update] I find this on the github issues, by @tufan-yoc

you have to copy the data array to an other variable in the scope:

st-table="displayedCollection" st-safe-src="rowCollection"

and

 //copy the references (you could clone ie angular.copy   
 // but then have to go through a dirty checking for the matches)
    $scope.displayedCollection = [].concat($scope.rowCollection);

If this truly is a requirement, why is it not explictly documented?

And why does the example on the smart-table website work without it?

score 1 · Accepted Answer · answered Feb 06 '17 at 21:52

You don't need to copy anything. what you set with the attribute st-table is simply a placeholder for your templates (ie a variable in the scope) which you will likely use in the row repeater, it does not have to be declared anywhere, smart-table will assign the items to be displayed to this variable so your templates can be updated.

your source of truth (ie your data) should be the collection you bind to st-safe-src attribute. Whenever the bound collection changes, smart table will update a local copy so it can perform the filter/sort/slice operations based on the latest and actual data.

However for convenience (and performance), if you don't intend to modify your data (or its arrival is not delayed like with ajax fetch) the internal copy is firstly based on any collection bound to the variable in the scope designed by the st-table attribute. Note in this case, the value will be erased and replaced by the displayed collection so the template is updated. Fortunately the initial copy will persist as private variable of smart-table.

If you encounter a problem it likely comes from somewhere else. If so please provide a running example (with angular version and smart table version)

It is only working for me if I do the copy in my code, not when I don't. My code is far too large to post, but you can see the same thing at http://plnkr.co/edit/s407ao?p=preview by commenting out line 18 — Mawg says reinstate Monica, Feb 06 '17 at 22:24
smart-table and angular versions you use on the plunker are pretty old ... — laurent, Feb 08 '17 at 15:55
That might explain it (+1). I will try to find time to update the Plunk (although I am working with the newest version at home & still have the same situation). — Mawg says reinstate Monica, Feb 08 '17 at 16:39

score 0 · Answer 2 · answered Feb 06 '17 at 16:59

No, it's not buggy. SmartTables will create an $scope.displayedCollection object or whatever name you use for the array that will hold a copy of the original data if you use the stSafeSrc attribute. If it doesn't show you any data check your rowCollection object, it should contain the original array. If you are working in Chrome try the ng-inspector for AngularJS so you can see the scope of your app. Also if you could post a plunker of your code it will be better.

score 0 · Answer 3 · answered Feb 06 '17 at 18:22

We can show that the user must take action to make acopy and keep it in synch with AJAX data, by looking at this Plunk (which is not mine).

If we comment out line 18:

$scope.displayedCollection = [].concat($scope.rowCollection);

as per the online example, the table becomes empty.

Conclusion: the website documentation is wrong to say

smart-table first creates a safe copy of your displayed collection

And, bizarrely, the (working) example on the website ... should not work (?)

Is the AngularJS smart-table documentation/demo buggy?

3 Answers3

Linked