在模板

Question

我一直在教自己有角度，我现在正在学习本教程https://docs.angularjs.org/tutorial，除了我没有克隆回购并使用不同的数据来保持它的趣味性。

我的问题可能是我犯的一个非常简单的错误，但我仍然试图理解框架的概念/术语，这使得难以搜索答案。

当我的模板看起来像这样..

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

..我可以输入搜索输入框来过滤ng-repeat列表，并按选项排序顺序排序。

但是通过数据上方的搜索/排序选项看起来会更好..

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

..除了显示按选项的搜索/排序外，ng-repeat数据永远不会出现。

为什么会这样，我如何让它以我想要的方式运作？

我没有看到我所做的和教程之间有任何重大差异（特别是在步骤3 - 7之间），我的猜测是由于搜索/排序在数据准备好之前引用数据，但是在教程这样结构没问题。

这是我的控制器

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

如果有的话，感谢并随意指出我的副本。

编辑：感谢Lex指出我错过了select元素的结束标记，解决这个问题解决了这个问题。

Answer 1

您缺少结束</select>标记。