Angular：將項目推送到列表不會更新視圖

當我將項目推送到數組時，視圖不會刷新列表。Angular：將項目推送到列表不會更新視圖

表：

<tbody id="productRows"> 
    <tr data-ng-repeat="product in products | filter: search"> 
     <td>{{ product.Code}}</td> 
     <td colspan="8">{{ product.Name}}</td> 
    </tr> 
</tbody>

形式：在控制器

<form data-ng-submit="submitProduct()"> 
    Code: 
    <br /> 
    <input type="text" required data-ng-model="product.Code"/> 
    <br /> 
    <br /> 
    Naam: 
    <br /> 
    <input type="text" required data-ng-model="product.Name"/> 
    <br /> 
    <input type="submit" value="Opslaan" /> 
</form>

submitProduct：

$scope.submitProduct = function() { 
    console.log('before: ' + $scope.products.length); 

    $scope.products.push({Code: $scope.product.Code, Name: $scope.product.Name}); 
    console.log('after:' + $scope.products.length); 
    console.log($scope.products); 

    $scope.showOverlay = false; 
};

正如你所看到的，我登錄數組中的全部項目和它的行爲像我會期待的。唯一不符合我期望的是我的表格的內容，並沒有顯示新的價值。

我必須做什麼，所以新的行顯示在表中？

來源

2013-05-16 Martijn

看起來像它應該工作。請添加jsfiddle或plnkr。 –

這個[plnkr]（http://plnkr.co/edit/UXvtEhNbiilRn6DjX93P?p=preview）與你的代碼工作正常嗎？你正確定義$ scope.products嗎？ –

什麼代碼調用'submitProduct（）'？如果此代碼運行在Angular的「outside」外部，則需要在submitProduct（）方法的末尾調用'$ scope。$ apply（）'，以使Angular運行一個摘要循環，這會導致您的視圖更新。 –

感謝您的回答和評論。問題出在另一個地方。在我的routeProvider我已經宣佈了一個控制器。我在我的div中也有一個ng-controller指令。所以我的控制器被執行兩次。當我刪除了ng-controller指令時，一切都正常，因爲它應該是:)

來源

2013-05-17 11:46:43 Martijn

謝謝！，它也解決了我的問題，我在routeProvider中聲明瞭一個控制器，而我的主體已經具有ng-controller屬性。你怎麼知道這是問題？ –

@DanielFlores嗯，我從頭到尾看我的代碼。所以我開始使用ap..module，app.routes，一直到我的觀點。當我看到我的觀點時，我注意到我已經兩次宣佈同一個控制者：在我的路線和我看來。 – Martijn

不錯的表演，謝謝 – jcc

我看不到剩餘的代碼，但要確保$scope.products在您的控制器中定義。

看到這個example。

我給你提供的代碼做的唯一加：

$scope.products = [];

如果這樣沒有幫助，那麼請提供更多信息。

來源

2013-05-16 14:27:03

您的解決方案適用於我。我有同樣的問題，其中沒有推到我的$ scope.lists.push（{}）;的項目。我宣佈$ scope.lists = [];在頂部，它像一個魅力。謝謝。 –

Angular：將項目推送到列表不會更新視圖

回答

相關問題