Angular.js - 根據用戶輸入切片json請求

我是Angular.js的初學者，目前正在瀏覽tutorial。我決定嘗試讓用戶顯示的電話號碼可以改變。在我的控制器中：Angular.js - 根據用戶輸入切片json請求

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硬編碼值，當我刷新頁面時列表被正確切片，但是改變輸入值對列表沒有任何影響。

來源

2017-08-17 monadoboi

你應該更新'displayNum'模型後調用'http'服務一次。 –

請您詳細介紹一下嗎？我將如何再次調用http？有沒有辦法檢查模型是否改變了？ – monadoboi

查看https://docs.angularjs.org/api/ng/directive/ngChange –

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

來源

2017-08-17 14:02:02 monadoboi

Angular.js - 根據用戶輸入切片json請求

回答

相關問題