Angular js 没有使用 ng-repeat 打印 ng-init 的数据

Question

我是新手，我正在尝试一些 angular js 示例，但是当创建 2 div 元素并尝试运行 angular js 程序时。当我使用 ng-repeat 时，第二个 div 打印初始化数组，第一个 div 不打印。谁能告诉我为什么会这样。我看不出 2 个数组的初始化方式有什么区别。代码如下。

<html data-ng-app>
<head>
<title>Angular js</title>
</head>
<body>
<input type="text" data-ng-model="name">{{name}}
<div class="container" data-ng-init="namess=['Hello','There','God','There']">
<h3>Looping with the ng-repeat Directive</h3>
    <h4>Data to loop through is initialized using ng-init</h4>
    <ul>
        <li data-ng-repeat="Personname in namess">{{Personname}}</li>
    </ul>
</div>
<div class="container" data-ng-init="names=['Dave','Napur','Heedy','Shriva']">
    <h3>Looping with the ng-repeat Directive</h3>
    <h4>Data to loop through is initialized using ng-init</h4>
    <ul>
        <li data-ng-repeat="name in names">{{name}}</li>
    </ul>
</div>
</body>
<footer>
<script type="text/javascript" src="angular.min.js"></script>
</footer>
</html>

我得到的结果如下

Looping with the ng-repeat Directive

Data to loop through is initialized using ng-init

Looping with the ng-repeat Directive

Data to loop through is initialized using ng-init

Dave
Napur
Heedy
Shriva

Answer 1

如果您查看控制台，您会在第一个 ng-repeat 上看到关于重复项的错误。因为您的数组中有两次 "There"，所以您需要向 ng-repeat 添加一个 track by。尝试用这个替换它：

<li data-ng-repeat="Personname in namess track by $index">{{Personname}}</li>

Answer 2

您的第一个数组中有重复的条目，如果您检查控制台，您会看到错误 "Error: [ngRepeat dupes]"。 Angular ngRepeat 不允许重复值。查看以下 link 了解详细信息 https://docs.angularjs.org/error/ngRepeat/dupes .

要修复，请删除重复条目（那里）或使用以下内容：

<li data-ng-repeat="Personname in namess track by $index">{{Personname}}</li>

data-ng-repeat="Personname in names track by $index，这应该可以解决问题。

Angular js 没有使用 ng-repeat 打印 ng-init 的数据

Angular js is not printing the data of ng-init using ng-repeat

javascript

angularjs

angularjs-ng-repeat

ng-init