Angular Js ng-repeat attribute

Я просто печатаю элементы массива, используя атрибут ng-repeat в Angular Js. Но это выход приходит таким образом ...Angular Js ng-repeat attribute

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 !' 
    } 
    ] 

    }; 

});

источник

2015-07-23 Tarun Vishnoi

Я не думаю, что это связано, но вы включили две копии Angular.js. ' ' вы должны оставить только один. –

Спасибо! Теперь он работает нормально. –

Вы ответите на контроль. – ozgur

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>

Проверьте это и посмотрите на разницу.

источник

2015-07-23 07:33:34

Вы включили две копии Angular.js.

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

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

Вы должны держать только один. Это создаст проблемы.

источник

2015-07-23 13:59:27

Angular Js ng-repeat attribute

ответ

Смежные вопросы