Angular error : Expected array but received: 0

Question

打开模型部分时出现此错误：

<form action="" novalidate name="newGroupForm">
    <div class="modal-body">
        <div class="row">
            <!-- SELECT THE NUMBER OF GROUPS YOU WANT TO CREATE -->
            <label>Select number of groups</label>
            <a class="btn" ng-click="newGroupCount = newGroupCount + 1" ng-disabled="newGroupCount == 10" ><i class="fa fa-plus-circle"></i></a>
            <input  class="groupCounter input-sm" ng-model="newGroupCount" type="number" min="1" max="10" disabled>
            <a class="btn" ng-click="newGroupCount = newGroupCount - 1" ng-disabled="newGroupCount == 1"><i class="fa fa-minus-circle"></i></a>
        </div>
        <br>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Group Name</th>
                    <th>Group Description (optional)</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="i in getNumber(newGroupCount) track by $index">
                    <td>{{$index+1}}</td>
                    <td>
                        <input class= input-sm type="text" required="true" autofocus="true" placeholder="Group name" ng-model="groupData.title[$index]">
                    </td>
                    <td>
                        <input class="form-control input-sm" type="textarea" ng-model="groupData.desc[$index]" placeholder="Group Description">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        <button class="btn btn-primary" type="submit" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button>
    </div>
</form>

模态控制器如下所示：

spApp.controller('newGroupCtrl',
    function newGroupCtrl($scope, $uibModalInstance, GroupService){

        $scope.groupData = {
            title: [],
            desc: []
        }

        $scope.newGroupCount = 1;

        $scope.getNumber = function(num) {
            //console.log(num);
            return new Array(num);
        }

        $scope.submit = function(){
            $uibModalInstance.close($scope.groupData);
        }
        $scope.cancel = function (){
            $uibModalInstance.dismiss('Cancelled group creation');
        };
    }
);

我看到的每个问题都涉及 filter 的使用，但我没有使用过滤器。每当我点击增量按钮时，错误就会重复：

<a class="btn" ng-click="newGroupCount = newGroupCount + 1" ng-disabled="newGroupCount == 10" ><i class="fa fa-plus-circle"></i></a>

Answer 1

$scope.getNumber 调用 new Array(num)，这将 return 一个 undefined 值的数组，与 newGroupCount.

的值成正比

例如：

new Array(5) // => [undefined, undefined, undefined, undefined, undefined]

浏览器处理得不好，因为它看起来是一个空数组。

您使用 ng-repeat 的方式并非本意。如果我是你，我会重构为如下所示：

$scope.groups = [];

$scope.addGroup = function() {
  // implement this, and use it in your button that increments the groups
  $scope.groups.push(/* whatever */);
}

$scope.removeGroup = function() {
  // implement this to remove a group 
  $scope.groups.splice(/* whatever */);
}

然后在你的 HTML:

<tr ng-repeat="group in groups">
  <!-- display group info -->
</tr>

在这里工作 angular（按预期使用它）可能会让你的生活更轻松，而不是与 ng-repeat 的意思作斗争上班。

数据一般以集合的形式存在（即[{},{},{}]）。这样格式化它会让你更容易。参见 the docs for ng-repeat。

Angular error : Expected array but received: 0

Angular error : Expected array but received: 0

javascript

angularjs

ng-repeat

angularjs-ng-repeat