javascript - Angular.js - 根据用户输入切片 json 请求

Question

我是 Angular.js 的初学者，目前正在阅读 tutorial .我决定尝试让用户可以更改显示的电话数量。在我的 Controller 中:

function PhoneListController($http) {
  var self = this;
  self.orderProp = 'age';

  $http.get('phones/phones.json').then(function(response) {
    self.phones = response.data.slice(0, self.displayNum); 
  });
}
PhoneListController.$inject = ['$http']; //services to inject for each parameter in PhoneListController

我根据用户输入的 displayNum 对从服务器获取的响应数据进行切片。我确定 displayNum 已在模型中更新，但它并没有像我预期的那样对 json 进行切片。 http请求是不是一开始就只发了一次？

我模板的相关部分:

<p>
  Number of phones displayed:
  <input ng-model="$ctrl.displayNum" />
</p>
...
<ul class="phones">
  <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
    <span>{{phone.name}}</span>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
<p>display num: {{$ctrl.displayNum}}</p>

display num: {{$ctrl.displayNum}}底部根据 <input ng-model="$ctrl.displayNum" /> 中输入的数字更新，但列表不会改变大小。如果我在 self.displayNum 中硬编码一个值在 Controller 中，当我刷新页面时，列表被正确切片，但更改输入中的值对列表没有任何影响。

Answer 1

正如@Alexander-Bolzhatov 所提到的，我只是将 http 请求放在一个更改函数中，由模板中的 ng-change 调用。

  $http.get('phones/phones.json').then(function(response) {
    self.phones = response.data; 
  });

  self.change = function(){
    $http.get('phones/phones.json').then(function(response) {
      self.phones = response.data.slice(0, self.displayNum); 
    });
  };

模板代码:

Number of phones displayed:
    <input ng-model="$ctrl.displayNum" ng-change="$ctrl.change()"/>