Angular:将项目推送到列表不会更新视图

Mar*_*ijn 7 javascript angularjs

当我将项目推送到数组时,视图将不刷新列表.

表:

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

形成:

<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>
Run Code Online (Sandbox Code Playgroud)

控制器中的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;
};
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,我记录了数组中的总项目,它的行为与我期望的一样.唯一没有做到我期望的是我的表的内容,它没有显示新值.

我该怎么做,所以表中会显示新行?

Bre*_*tin 5

我看不到你的其余代码,但确保$scope.products在你的控制器中定义.

看这个例子.

我对您提供的代码的唯一补充是:

$scope.products = [];
Run Code Online (Sandbox Code Playgroud)

如果这没有帮助那么请提供更多信息.


Mar*_*ijn 5

感谢您的回答和评论.问题发生在另一个地方.在我的routeProvider我已经宣布的控制器.ng-controller我的div中也有一个指令.所以我的控制器执行两次.当我删除ng-controller指令时,一切都正常工作,应该是:)