Question

我对angularjs很新。我被困在ng-repeat指令中。

这是我的代码：

<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>    
   <script type="text/javascript">
    function helloWorldExampleCtrl($scope){
        $scope.userName = "Vicky!"
          $scope.contacts = ["hi@email.com", "hello@email.com"];
    }
  </script>
 </head>
 <body>

<div> 
   <h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>

   Emails : <br>  
   <ul>
     <li ng-repeat="contact in contacts"> {{ contact }} </li>
   </ul>
  </h1>
</div>
</body>
</html>

我得到的输出：

Welcome Vicky! ! 
Emails :
hi@email.com
hi@email.com
hello@email.com
hello@email.com

但例外是：

Welcome Vicky! !
Emails :
hi@email.com
hello@email.com

我做错了什么？.....

Answer 1

您使用脚本标记将两个版本的AngularJS库添加到您的页面。删除一个来解决问题：

<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
   <script type="text/javascript">
    function helloWorldExampleCtrl($scope){
        $scope.userName = "Vicky!"
          $scope.contacts = ["hi@email.com", "hello@email.com"];
    }
  </script>
 </head>
 <body>

<div> 
   <h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>

   Emails : <br>  
   <ul>
     <li ng-repeat="contact in contacts"> {{ contact }} </li>
   </ul>
  </h1>
</div>
</body>
</html>

A Plunker with only one AngularJS import that works

A Plunker with two AngularJS Library Imports that duplicates your problem

AngularJs ng-repeat工作不正常

1 个答案: