javascript - ng-repeat 不适用于数组

Question

我是 AngularJs 和 Javascript 的新手，所以我会尽力解释这个问题。我的 Angular Controller 从我的 MVC Controller 中的方法接收数据。每次运行脚本时，MVC Controller 都会返回 1 个项目。每次在无序列表中使用 ng-repeat 返回新项目时，我都试图动态扩展我的 html 页面中的项目列表。当我使用 ng-repeat 时，第一项不会显示，直到添加第二项然后它们一起显示。如果我添加第三个项目，这些项目会奇怪地显示。这是使用 ng-repeat 进行迭代的示例:

迭代 1:

空白

迭代 2:

项目 1

项目 2

迭代 3:

["项目 1", "项目 2"]

项目 3

第三次迭代从字面上显示了括号和引号，而不是无序列表的项目符号。谁能告诉我发生了什么事？

这是 Angular Controller 代码:

     $scope.addState = function () {
        //debugger;
        companyService.addState($scope.form)
        .success(function (data) {
            if (pass == 0) {
                $scope.addedStates = data;
                pass = pass + 1;
            }
            else {

                addedStates = [
                    angular.copy($scope.addedStates),
                    data

                ];
                $scope.addedStates = addedStates;

            }
            $scope.rmgStates = $scope.rmgStates - 1;

            if($scope.rmgStates == 0)
            {
                $scope.canSubmit = true;
                $scope.lastState = false;
            }
            else {
                $scope.canSubmit = false;
                $scope.lastState = true;
            }
        })
    };

这是html代码:

                        You have added the following States:<br />
                    <ul>
                        <li ng-repeat="item in addedStates">
                            {{item}}
                        </li>
                    </ul>

非常感谢任何帮助。

Answer 1

问题是，在第一遍中，您将 addedStates 设置为添加的单一状态——因为 ng-repeat 期望和数组，它没有显示任何内容。在第一次之后的传递中，您采用了先前添加的状态，用一个数组将其包装起来，然后将其与新状态一起插入到一个数组中，因此每次都会更深一层——这就是为什么它第二次显示正确格式的原因, 但第三个是数组中的数组。

相反，您应该初始化并清空数组，并在每次成功请求添加状态时，将新状态推送到现有数组中。

试试这个:

$scope.addedStates = [];

$scope.addState = function () {
        //debugger;
        companyService.addState($scope.form)
        .success(function (data) {
            $scope.addedStates.push(angular.copy(data));
            $scope.rmgStates = $scope.rmgStates - 1;

            if($scope.rmgStates == 0)
            {
                $scope.canSubmit = true;
                $scope.lastState = false;
            }
            else {
                $scope.canSubmit = false;
                $scope.lastState = true;
            }
        })
    };