Question

我是Angular.js的初学者，现在正在浏览tutorial。我决定尝试让用户可以更改显示的手机数量。在我的控制器中：

 <div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1">
  <div class="inner" onclick="alert('Hello world form inside');event.stopPropagation();" role="button" tabIndex="-1">
  </div>
</div>

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

我的模板的相关部分：

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

底部的<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" />中的值进行硬编码，则在刷新页面时列表会被正确切片，但更改输入中的值对列表没有任何作用。

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()"/>

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

1 个答案: