Angular.js - ユーザー入力に応じてjsonリクエストをスライスする

Question

私はAngular.jsの初心者で、現在tutorialを使っています。私は、電話機の台数をユーザーが変更可能に表示させることにしました。私のコントローラで：

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リクエストは最初に一度だけ作成されますか？

私のテンプレートの関連セクション：<input ng-model="$ctrl.displayNum" />での数字入力に応じて下のアップデートで

display num: {{$ctrl.displayNum}}

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

が、リストのサイズを変更しません。コントローラでself.displayNumの値をハードコードすると、ページを更新するときにリストが正しくスライスされますが、入力値を変更するとリストに何も反映されません。

Answer 1

@ Alexander-Bolzhatovによると、テンプレートのng-changeによって呼び出される変更機能にhttpリクエストを置くだけです。

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