将值推送到 AngularJS 数组

Question

我正在尝试使用AngularJS中的 .push() 向一个数组中添加数据值，但是我一直收到以下错误信息：

Error: $scope.test.push is not a function

这里是我的HTML代码：

<div ng-controller="Test">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">

    <div class="page-header"><h1>Testar</h1></div>
    <table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th>Sträcka</th>
            <th>Tid</th>
         </tr>
    </thead>
        <tr ng-repeat="info in test"><td>{{info.stracka}}</td><td>{{info.tid}}</td></tr>
    </table>

    <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
        <div class="form-group" ng-class="{'has-error' : userForm.stracka.$invalid && !userForm.stracka.$pristine, 'has-success' : userForm.stracka.$valid }">
            <label>Sträcka(m):</label>
            <input type="text" name="stracka" class="form-control" ng-model="form.stracka" required>
            <p ng-show="userForm.stracka.$invalid && !userForm.stracka.$pristine" class="help-block">Fel sträcka</p>
        </div>

        <div class="form-group" ng-class="{'has-error' : userForm.tid.$invalid && !userForm.tid.$pristine, 'has-success' : userForm.tid.$valid && !userForm.tid.$pristine}">
            <label>Tid:</label>
            <input type="text" name="tid" class="form-control" ng-model="form.tid" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.tid.$error.minlength" class="help-block">För kort</p>
            <p ng-show="userForm.tid.$error.maxlength" class="help-block">För långt</p>

        </div>
        <button type="submit" class="btn btn-primary">Lägg till</button>
    </form>
</div>
</div>
</div>

这是我的控制器：

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            /*testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });*/
            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                $scope.test.push($scope.form);

            }).error(function(data, status) {

            });
        }
    };
});

有人可以帮助我并解释为什么我会收到这条消息吗？

- user500468

---

检查isArray($scope.test)是否为真。 - Mritunjay

'/nao/test/test/' 返回的是什么？data.data 实际上是一个数组吗？ - RobH

你能快速制作一个示例来展示问题吗？因为ThomasP1998的答案应该是可行的。 - Ronald91

Answer 1

尝试执行以下操作：

$scope.test = [];
$scope.test.push($scope.form);

- ThomasP1988

---

现在我收到了这个消息：SyntaxError: missing ; before statement var $scope.test = []; - user500468

@ThomasP1988：我得到了与第一个相同的错误，即$scope.test.push不是一个函数。 - user500468

如果您声明 $scope.form = [] 而不是 {} 呢？ - lulu88

Answer 2

试试这个：

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data.data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            /*testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });*/

            $http.post($rootScope.appUrl + '/nao/test', $scope.form)
            .success(function(data, status, headers, config) {
                console.log(data);
                $scope.test = $scope.test || []; 
                $scope.test.push($scope.form);

            }).error(function(data, status) {

            });
        }
    };
});

- Amir Popovich

Answer 3

首先创建一个数组 - $scope.usermsg = []; 然后向其中添加值 - $scope.usermsg.push($variable);

- partho222

---

你需要详细阐述你的答案。解释为什么以及在哪里你尝试实现这个答案。 - MegaMind