0

I'm trying to use angular-smart-table for grid in my new AngularJS app. According to the document, to sort a column, I should use the st-sort directive like bellow:

<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>

However, I'm trying to re-use the piece of code for not only one table, so I don't know the table field names in advance until the run-time. I'm doing something like bellow:

<script type="text/ng-template" id="content1">
  <div ng-repeat="table in $ctrl.tables">
    <h2>{{table._tableName}}</h2>
    <table st-table="table._data" class="table table-striped">
      <tr>
        <th ng-repeat="fieldName in table._fieldNames" st-sort="{{fieldName}}">{{fieldName}}</th>
      </tr>
      <tr ng-repeat="data in table._data">
        <td ng-repeat="fieldName in table._fieldNames">{{$ctrl.formatCell(table, data, fieldName)}}</td>
      </tr>
    </table>
  </div>
</script>

And this cannot work (cannot sort, other functions OK). I tried bellow it does not work, seems the st-sort has to be in the <th> tag.

<th ng-repeat="fieldName in table._fieldNames"><span st-sort="{{fieldName}}">{{fieldName}}</span></th>

And bellow does not work as well:

<tr>
  <span ng-repeat="fieldName in table._fieldNames">
    <th st-sort="{{fieldName}}">{{fieldName}}</th>
  </span>
</tr>

Today I tried to develop a directive and use it in the comment by setting restrict to "M" to solve the above. Then I got a new problem: I'm using UI-Router in this app and I cannot get the table contents in my directive, because UI-Router states have isolated scopes and it only supports controllers but does not support directives. The author may think supporting directives is not necessary (yes in most cases, but this kind of assumptions are always dangerous).

I'm Trying two possible ways: 1., put the field names to the session/local storage for sharing as a work-around; 2., abandon UI-Router. Appreciate anyone providing a better solution.

zipper
  • 377
  • 1
  • 5
  • 18
  • Putting the field names to the session/local storage for sharing as a work-around does not work: the generated table header HTML is like `id....` I think the `class="ng-isolate-scope"` made the `st-sort="id"` invalid to the contents in the tbody. – zipper Oct 23 '17 at 13:35
  • Abandon UI-Router finally saved me and removed the `class="ng-isolate-scope"`. Note that besides the `st-table="data.rows"` directive in the `` of the table header row element, I also have to add in each `` again in my directive when generating the table header dynamically: `newElement += '' + scope.data.fields[i] + '';`; otherwise I get `Uncaught Error: [$compile:ctreq]` (under Chrome. Firefox shows no error but just cannot work). – zipper Oct 24 '17 at 18:05

0 Answers0