Currently, I am teaching myself Angular by following a tutorial at https://docs.angularjs.org/tutorial, but with my twist of using different data to keep things interesting.
My struggle seems to stem from a simple mistake I might be making, compounded by my effort to grasp the framework's concepts and jargon, which makes it challenging to find solutions through search.
When I structure my template like this ..
<div>
<ul>
<li ng-repeat="electorate in $ctrl.electorates | filter:$ctrl.query | orderBy:$ctrl.orderProp">
<p>{{electorate.electorate}}</p>
<p>{{electorate.mp}} </p>
<p>{{electorate.party}} </p>
</li>
</ul>
<div> Search: <input ng-model="$ctrl.query"/>
<p>
Sort by:
<select ng-model="$ctrl.orderProp">
<option value="party">Party</option>
<option value="mp">MP - Alphabetical</option>
</p>
</div>
</div>
I can successfully filter and order the list based on user input. However, I would prefer if the search and sort options were located above the data section, like this..
<div>
<div> Search: <input ng-model="$ctrl.query"/>
<p>
Sort by:
<select ng-model="$ctrl.orderProp">
<option value="party">Party</option>
<option value="mp">MP - Alphabetical</option>
</p>
</div>
<ul>
<li ng-repeat="electorate in $ctrl.electorates | filter:$ctrl.query | orderBy:$ctrl.orderProp">
<p>{{electorate.electorate}}</p>
<p>{{electorate.mp}} </p>
<p>{{electorate.party}} </p>
</li>
</ul>
</div>
Unfortunately, even though the search and sort elements are visible, the data from the ng-repeat is not displayed.
Why is this happening and how can I fix it to achieve the desired outcome?
Upon comparing my implementation with the tutorial (specifically steps 3-7), I couldn't identify any major differences. My suspicion is that the issue lies in the search and sort functionalities referencing the data before it is fully loaded, although this was not an issue in the tutorial structure.
Additionally, here is my controller code:
angular.
module('electorateList').
component('electorateList', {
templateUrl: 'electorate-list/electorate-list.template.html',
controller: function ElectorateListController($http){
var self = this;
self.orderProp = 'party';
$http.get('electorates.json').then(function(response){
self.electorates = response.data;
});
}
});
Thank you for your help, and please guide me towards any existing solution if available.
Edit: Special thanks to Lex for pointing out the missing closing tag for the select element, resolving which fixed the issue.