Question

在我的HTML中，我有：

<div ng-repeat="row in test.user">
..
</div>

在我的代码中，我得到一条新记录并将其添加到数组中：

 test.addTest = function(selectedRow) {
        $http({
            url: '/api/Test/Post/' + selectedRow,
            method: "POST"
        })
        .success(function (data) {
            test.user.push(data);
        });

    }

但显示屏没有显示任何变化。有人可以给我一些建议，为什么会这样。

Answer 1

看起来您正在更新摘要周期之外的数组。尝试拨打scope.$apply（请参阅https://docs.angularjs.org/api/ng/type/$rootScope.Scope和https://docs.angularjs.org/guide/scope中的“生命周期”部分）

test.addTest = function(selectedRow) {
    $http({
        url: '/api/Test/Post/' + selectedRow,
        method: "POST"
    })
    .success(function (data) {
        scope.$apply(function () { test.user.push(data) };
    });

}

Answer 2

如果没有完整的代码，很难分辨，但这里有一个类似于你在没有POST的情况下做的小提琴：http://jsfiddle.net/VFBTy/6/

标记：

<div ng-app="app" ng-controller="myCtrl">
    <div ng-repeat="row in test.user">
        {{ row }}
    </div>

    <input type="text" ng-model="test.input" />
    <button type="button" ng-click="test.addTest(test.input)">Add</button>
</div>

JavaScript的：

var app = angular.module('app', []);

app.controller('myCtrl', function ($scope) {

    $scope.test = {
        user: [ 'One', 'Two' ],
        addTest: function (data) {
            if($scope.test.user.indexOf(data) === -1) {
                $scope.test.user.push(data);
            } else {
                alert('cannot add dupes');   
            }
        },
        input: ''
    };

});

希望这有帮助。

Answer 3

确保在test.user下定义$scope，否则该变量对HTML不可见。

假设函数addTest()位于您的控制器内，并且您的控制器已注入$scope，则您的代码将变为

// inside controller code

// initialize $scope.test.user as an empty array
// before appending any user(s) into it
$scope.test.user = [];

$scope.test.addTest = function(selectedRow) {
    $http({
        url: '/api/Test/Post/' + selectedRow,
        method: "POST"
    })
    .success(function (data) {
        $scope.test.user.push(data);
    });
}

当我将新值推入数组时，为什么我的HTML不会改变？

3 个答案: