Implementing the Tables AngularJS View

With tableController implemented, you can implement the AngularJS view that utilizes the words data in table form. Listing 29.18 implements a simple template to provide controls to filter, sort, and page the words, as well as display the words in a table.

Note that you populate <select> by using ng-options on the sortFields array. Also, you use the ng-repeat on the <tr> element to implement the rows in the table. The individual values for the words data are rendered to the page by using AngularJS expressions.

The limit field sets the number of rows returned, the contains field sets the filter for words that contain the text, and sort by allows you to select a field and direction for sorting. Figure 29.4 shows a couple different views of the rendered template.

Listing 29.18 tables.html: Implementing the AngularJS template for the tables view

Click here to view code image

01 <div ng-controller="tableController"><hr>
02 <input class="findButton" type="button"
03        value="Find Words" ng-click="find()" />
04 <div id="sortOptions">
05   <label class="tableLabel">Page Limit</label>
06   <input class="tableInput" type="text" ng-model="limit" /><br>
07   <label class="tableLabel">Contains</label>
08   <input class="tableInput" type="text" ng-model="contains" /><br>
09   <label class="tableLabel">Sort By</label>
10   <select class="tableInput" ng-model="sortField"
11           ng-options="field for field in sortFields"></select>
12   <input type="radio" ng-model="direction" value="asc"> Ascending
13   <input type="radio" ng-model="direction" value="desc"> Descending
14 </div>
15 <hr>
16 <div>
17   <input class="pageButton" type="button" value="Prev"
18          ng-click="prev()" />
19   <input class="pageButton" type="button" value="Next"
20          ng-click="next()" />
21   <label class="tableLabel">Words {{skip+1}} to {{skipEnd}}</label>
22   <hr>
23   <div id="tableContainer">
24     <table>
25       <tr><th>Word</th><th>First</th><th>Last</th><th>Length</th>
26       <th>Vowels</th><th>Consonants</th></tr>
27       <tr ng-repeat="word in words">
28         <td>{{word.word}}</td>
29         <td>{{word.first}}</td>
30         <td>{{word.last}}</td>
31         <td>{{word.size}}</td>
32         <td>{{word.stats.vowels}}</td>
33         <td>{{word.stats.consonants}}</td>
34       </tr>
35     </table>
36   </div>
37 </div>
38 </div>

Figure 29.4 The tables view allows you to dynamically adjust which words are displayed by using filtering, sorting, and paging.