damtypo damtypo - 4 months ago 17
Javascript Question

ng-repeat not showing anything when ng-model is above it in template

I have been teaching myself angular and am currently following this tutorial, https://docs.angularjs.org/tutorial, except I haven't cloned the repo down and am using different data to keep it interesting.

My issue is probably a very simple mistake I am making but I'm still trying to understand the concepts/jargon of the framework which makes it hard to search for an answer.

When my template looks 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 type in the search input box to filter the ng-repeat list and order them by the sort by options just fine.

But it would look better with the search/sort by options above the data like so..

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


.. except while it shows the search/sort by options, the ng-repeat data never appears.

Why is this and how do I make it work in the way I want?

I don't see any big differences between what I have done and the tutorial (specifically around steps 3 - 7) and my guess was it is due to the search/sort referencing the data before it is ready, however in the tutorial it is structured this way no problem.

Here is my controller as well

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;
});
}
});


Thanks and feel free to point me to a duplicate etc if there is one.

Edit: Thanks to Lex for pointing out I was missing a closing tag for the select element, resolving that fixed the issue.

Lex Lex
Answer

You are missing a closing </select> tag.

Comments