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.
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>