爲什麼ng-change在控制檯中落後一步？

調整器：http://plnkr.co/edit/u3olPFyiT7tFdKKVvzZf?p=preview 爲什麼ng-change在控制檯中落後一步？

我有一個列表和一個輸入，用於過濾所述列表。

如果您在鍵入時查看屏幕上「結果」的編號，則說明正確。但是如果你看看控制檯中的數字，它似乎總是落後一步。

爲什麼？以及如何解決它？

JS：

$scope.users = [ 
    'mike', 
    'john', 
    'pete' 
    ] 

    $scope.results = []; 

    $scope.count_results = function() { 
    console.log($scope.results.length) 
    }

HTML：

<input type="text" class="form-control" ng-model="user_name" ng-change="count_results()"> 
<ul class="dropdown-menu"> 
    <li ng-repeat="user in results = (users | filter: user_name) | limitTo: 3">{{user}}</li> 
</ul> 
Results: {{results.length}}

來源

2016-01-22 trs

的*「爲什麼」 *的部分是相當簡單的...你想幹什麼？ – charlietfl

原因是所述過濾器過濾所述列表之前ng-change被執行。在執行ng-change的那一刻，result未設置爲新列表，因此控制檯輸出在過濾之前顯示舊列表的長度。

編輯：

當你在視圖下執行濾波ng-change mehtod內，而不是你能解決這個問題。然後只顯示結果。見我plunker

$scope.count_results = function() { 
     $scope.results = $filter('filter')($scope.users, $scope.user_name); 
     console.log($scope.results.length) 
    }

來源

2016-01-22 15:23:35 Christoph

那麼我該如何讓控制檯顯示正確的'結果'號？ – trs

@murid查看我的編輯和我的朋友 – Christoph

兩個ng-model和ng-change添加change事件偵聽器，它們所應用的輸入。當你鍵入輸入時，事件處理程序被執行（其中包括你的count_results）。事件偵聽器會導致模塊值更改並觸發新的$digest週期。

$digest週期是角度比較舊的模型值與新的模型值並相應地更新視圖。這是過濾器應用了更新的標準來縮小列表的範圍。

您添加即

<span class="{{count_results()}}"></span>

你會看到console.log印很多次，在同步總是最後一個值。然而，這是很沒用，我懷疑你會更願意希望有$watch控制器內：

$scope.$watch('results.length', function(newValue, oldValue){ 
    console.log('new value is', newValue); 
});

來源

2016-01-22 15:28:13 miensol

你可以用$watch處理。我編輯的代碼如下：

http://plnkr.co/edit/R3QRa1bhGyNwAeU6OOVb?p=preview

來源

2016-01-22 15:29:09

用於創建手錶的方法存在嚴重缺陷。將爲每個輸入的字母添加一個新的手錶。是複合手錶。不要在事件處理程序中創建它。還應該回答代碼並使用演示作爲概念驗證 – charlietfl

@charlietfl - 您的解決方案是什麼？ – trs

可以使用手錶......但每次UI事件觸發時都不要創建新手錶。當你慢慢地輸入'p..e..t..e'時，看看控制檯 – charlietfl

爲什麼ng-change在控制檯中落後一步？

回答

相關問題