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：将项目推送到列表不会更新视图

回答

相关问题