Question

我对AngularJS和JavaScript很新。我正在完成的一个教程是迭代某些名称，但出于某种原因，它只是不起作用。有关该怎么办的任何建议？以下是我的代码。

<!doctype html>
<html lang="en" ng-app ng-controller="MainCtrl">
<head>
    <meta charset="utf-8">
    <title>Learning AngularJS: Controllers</title>
</head>
<body>
    <h1>The People App</h1>
    <h4>View People</h4>
    <ul>
        <li ng-repeat="person in people">
            from ,
        </li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        function MainCtrl($scope) {
            $scope.people = [{
                    name: 'John Doe',
                    city: 'New York City',
                    state: 'New York'
                },{
                    name: 'John Smith',
                    city: 'Oklahoma City',
                    state: 'Oklahoma'
                },{
                    name: 'Henry Black',
                    city: 'Topeka',
                    state: 'Kansas'
            }];
        }
    </script>
</body>
</html>

Answer 1

要输出范围变量，您必须使用双花括号表示法，如下所示：

{{person}}

在你的情况下，我相信你想得到这样一个人的内在属性：

{{ person.name }}

在您的示例中，正如我所见，您希望显示如下信息：

John Doe from New York City

为此，您必须使用双花括号表示法in this example：

{{person.name}} from , {{person.city}}

另外，您可以使用AngularJS过滤器“json”来查看以json打印出来的人员列表：

{{ people | json  }}

Answer 2

你需要写：

<li ng-repeat="person in people">
    {{person.name}} {{person.city}} {{person.state}}
</li>

Answer 3

您需要以这种方式将数据插入模板：

<li ng-repeat="person in people">
    {{person.name}} from {{person.city}}, {{person.state}}
</li>

ng-repeat不迭代范围内的项目

3 个答案: