Question

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

迭代1：

空白

迭代2：

第1项

第2项

迭代3：

[＆＃34; Item1＆＃34;，＆＃34; Item2＆＃34;]

第3项

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

这是Angular控制器代码：

     $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;
            }
        })
    };

Answer 2

在数组中添加新项的方法如下。使用：

$scope.addedStates.push(data);

而不是：

if (pass == 0) {
    $scope.addedStates = data;
    pass = pass + 1;
}
else {

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

ng-repeat不使用数组

2 个答案: