Question

我只是在Angular Js中使用ng-repeat属性打印数组元素。但是输出正以这种方式出现......

Tarun
Tarun
Tarun
Sandeep
Sandeep
Sandeep
Rajat
Rajat
Rajat

预期的输出应该以这种方式出现

Tarun
Sandeep
Rajat


<!DOCTYPE  html>
<html ng-app="eventsApp">
<head><title>Angular Js</title>
<link rel="stylesheet" href="css/app.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> -->
</head>
<body>
<div ng-controller="EventController">
<img ng-src={{ImageUrl}} />
<hr/>
<div class="container">
<h2> {{event.Name}} {{event.Date}} {{event.Time}}</h2>
<h4>{{event.Location.City}} {{event.Location.State}}
{{event.Location.Country}}, {{event.Location.Pin}}</h4>

<div class="thumbnails" ng-repeat="session in event.sessions">
{{session.CreatorName}}
</div>

</div>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore-1.4.4.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/EventController.js"></script>
</body> 
</html>

我的控制器是

'use strict';
eventsApp.controller('EventController', function($scope){

    $scope.message="Hello There !!";
    $scope.ImageUrl='img/angularjs-logo.png';


    $scope.event ={

     Name : "Angular Js Learning Camp",
     Time : "10:00 Am",
     Date : "10/10/2015",
     Location :{

      City : "Pune",
      State : "MH",
      Country :"India",
      Pin : 411007
     },
     sessions :
     [{
        CreatorName : 'Tarun',
        Topic : 'Introduction',
        Duration : '1 Hr',
        Level : 'Easy',
        Abstraction : 'In this tutorial you will know what is Angular Js !'
     },
     {
        CreatorName : 'Sandeep',
        Topic : 'Moduls',
        Duration : '2 Hr',
        Level : 'Intermediate',
        Abstraction : 'In this tutorial you will know what is Module in Angular Js !'
     },
     {
        CreatorName : 'Rajat',
        Topic : 'Controller',
        Duration : '3 Hr',
        Level :'Advanced',
        Abstraction : 'In this tutorial you will know what is Controller in Angular Js !'
     }
     ]

    };

});

Answer 1

var eventsApp= angular.module("eventsApp", []);

eventsApp.controller('EventController', function($scope){

$scope.message="Hello There !!";
$scope.ImageUrl='img/angularjs-logo.png';


$scope.event ={

 Name : "Angular Js Learning Camp",
 Time : "10:00 Am",
 Date : "10/10/2015",
 Location :{

  City : "Pune",
  State : "MH",
  Country :"India",
  Pin : 411007
 },
 sessions :
 [{
    CreatorName : 'Tarun',
    Topic : 'Introduction',
    Duration : '1 Hr',
    Level : 'Easy',
    Abstraction : 'In this tutorial you will know what is Angular Js !'
 },
 {
    CreatorName : 'Sandeep',
    Topic : 'Moduls',
    Duration : '2 Hr',
    Level : 'Intermediate',
    Abstraction : 'In this tutorial you will know what is Module in Angular Js !'
 },
 {
    CreatorName : 'Rajat',
    Topic : 'Controller',
    Duration : '3 Hr',
    Level :'Advanced',
   Abstraction : 'In this tutorial you will know what is Controller in Angular Js !'
 }
 ]

};
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<body  ng-app="eventsApp">
<div ng-controller="EventController">
<img ng-src={{ImageUrl}} />
<hr/>
<div class="container">
<h2> {{event.Name}} {{event.Date}} {{event.Time}}</h2>
<h4>{{event.Location.City}} {{event.Location.State}}
{{event.Location.Country}}, {{event.Location.Pin}}</h4>

<div class="thumbnails" ng-repeat="session in event.sessions">
{{session.CreatorName}}
</div>
</div>
</div>
</body>

检查一下，看看差异可能。

Answer 2

您包含两份Angular.js。

<script src="lib/angular/angular.js"></script>

和

<script src="lib/angular/angular.min.js"></script>

你应该只保留一个。这会产生问题。

Angular Js ng-repeat属性

2 个答案: