Question

这是我的代码，我是从w3school那里拿来的。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "sparsh";
        $scope.lastName = "khandelwal";
    });
</script>
<title>Home Page</title>
</head>
<body>
    <div ng-app="myApp" ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name : <input type="text" ng-model="name">
        </p>
        <h1>Hello {{name}}</h1>
    </div>

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
</body>
</html>

第二个块中的

ng-repeat不起作用。

这是我在浏览器上获得的输出 enter image description here

请帮帮我

Answer 1

Angular仅引导页面上第一个找到的应用程序，即具有ng-app属性的第一个容器。您放置的第二个，ng-app=""将被忽略。虽然，您可以使用angular.bootstrap方法手动引导第二个方法，但在您的情况下，将整个body包装到同一个应用程序并删除第二个ngApp指令更有意义：

<body ng-app="myApp">
    <div  ng-init="name='Sparsh'">
        <div ng-controller="myCtrl">{{firstName}}</div>
        <p>
            Name :
            <input type="text" ng-model="name" />
        </p>
        <h1>Hello {{name}}</h1>
    </div>
    <div  ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
    </div>
</body>

演示： http://plnkr.co/edit/UXTGEWOaRu82WpeOvuOz?p=preview

Answer 2

你可以在html页面中只有一个ng-app

所以将代码更改为

<body ng-app="myApp">
<div  ng-init="name='Sparsh'">
    <div ng-controller="myCtrl">{{firstName}}</div>
    <p>
        Name :
        <input type="text" ng-model="name" />
    </p>
    <h1>Hello {{name}}</h1>
</div>
<div  ng-init="names=['Jani','Hege','Kai']">
    <ul>
        <li ng-repeat="x in names">{{x}}</li>
    </ul>
</div>
</body>

Answer 3

这部分代码

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{x}}</li>
        </ul>
</div>

没有ng-app

ng-repeat仅适用于ng-app

Answer 4

问题是，每个网页只能自动引导一个ng-app。因此第二个ng-repeat不会被解析，因为它不包含在应用程序中。

您需要使用angular.bootstrap()

手动引导您的应用

https://docs.angularjs.org/api/ng/function/angular.bootstrap

Angular：ng-repeat不起作用

4 个答案: