Search code examples
angularjssmart-table

Is the AngularJS smart-table documentation/demo buggy?

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?

Solution

  • 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)