CODEWITHSUNDEEP
angularjs
user3106151
user3106151

Reputation: 23

Order a row or column in a table with angularJS

I have been manually ordering columns in my table using AngularJS. Now I have the problem that I need to order the rows in a very specific way (much like the columns). Instead of making this table huge in the Html, I would rather ask around to see if there is a way that I could perhaps define an array in the .js script and have the columns/rows order themselves based on those arrays.

I have seen plenty of examples of how to sort alphabetically or by index but none so far that show how to sort by a predefined array.

Here is the table I am working with:

<table>
  <thead>
    <tr>
      <th>
        <select ng-init="selectedRace='Human'" ng-model="selectedRace">
          <option ng-repeat="(raceName, item) in races">{{raceName}}</option>
        </select>
      </th>
      <!--<th ng-repeat="(statGroup, item) in race.Attributes" class="{{statGroup}}">{{statGroup}}</th>-->
      <!--Going to manually type the column headers until I figure out how to sort via array or something-->
      <th>Starting Attribuites</th>
      <th>Hero Limit</th>
      <th>Epic Limit</th>
      <th>Veteran Limit</th>
    </tr>
  </thead>
  <tbody ng-model="race.Attributes">
    <tr ng-repeat="(statName, item) in race.Attributes['Starting Attributes']">
      <td class="statsDes">{{statName}}</td><!--These are not in proper order! I need to sort this via array or something-->
      <td class="Starting Attributes">{{race.Attributes['Starting Attributes'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Hero Limit'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Epic Limit'] | FilterSet:statName}}</td>
      <td>{{race.Attributes['Veteran Limit'] | FilterSet:statName}}</td>
    </tr>
  </tbody>
</table>
</br>

Any ideas? Other than doing it manually?

Upvotes: 0

Views: 722

Answers (1)

jvandemo
jvandemo

Reputation: 13296

No need to do anything manually when you have AngularJS at your disposal.

AngularJS offers the orderBy filter to order an array by expression (http://docs.angularjs.org/api/ng.filter:orderBy).

If you need some feature that is not supported by the default orderBy filter, you can write your own custom filter to manipulate (sort) the array to your liking.

You can read more about custom filters on http://docs.angularjs.org/tutorial/step_09.

Hope that helps!

Upvotes: 1

Related Questions