Angular.js - Slicing eine Json Anfrage nach Benutzereingabe

Question

Ich bin ein Anfänger bei Angular.js und bin derzeit durch die tutorial. Ich entschied mich zu versuchen, die Anzahl der angezeigten Telefone durch den Benutzer änderbar zu machen. In meiner Steuerung:

Ich schneide die Antwortdaten, die ich vom Server gemäß dem displayNum-Eingang vom Benutzer erhalten. Ich bin sicher, dass displayNum im Modell aktualisiert wird, aber es schneidet nicht den JSON wie ich es erwartet hatte. Wird die http-Anfrage nur einmal beim Start gemacht?

Der entsprechende Abschnitt meiner Vorlage:

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

Die display num: {{$ctrl.displayNum}} unten Updates nach der Zahleneingabe in <input ng-model="$ctrl.displayNum" />, aber die Liste Größe nicht ändert. Wenn ich einen Wert für self.displayNum im Controller fest codiere, wird die Liste korrekt geschnitten, wenn ich die Seite aktualisiere, aber das Ändern des Werts in der Eingabe führt nichts zur Liste.

Answer 1

Wie von @ Alexander-Bolzhatov erwähnt, lege ich einfach die http-Anfrage in eine Änderungsfunktion, aufgerufen von ng-change in der Vorlage.

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

Template Code:

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