Question

我试图在地址和日期下添加会话详细信息。但ng-repeat正在运行，但s not displaying any details under sessions section. It没有给我任何错误。任何人都可以检查我的代码，让我知道缺少什么。

..... ..... app.js

＆＃39;使用严格的＆＃39;;

var eventsApp = angular.module（＆＃39; eventsApp＆＃39;，[]）;

＆＃13;

'use strict';


eventsApp.controller('EventController',
                    
    function EventController($scope){
   $scope.event = {
       name: 'Angular Event App',
       date: '04/02/2017',
       time: '3.09 am',
       location: {
           address: 'Google Headquaters',
           city: 'Mountain View',
           Province: 'CA'
       },
       imageUrl: '/img/angularjs-logo.png',
       sessions: [
           {
               name: 'Directive Masterclass'
           },
           {
               name: 'Scope for fun and profit'
           },
           {
               name: 'well Behaved Controllers'
           }
       ]
   }; 
});

＆＃13;

    <!DOCTYPE html>
    <html lang="en" ng-app="eventsApp">
    
    <head>
        <meta charset="utf-8">
        <title>Event Registration</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/app.css">
        <script src="lib/jquery.min.js"></script>
        <script src="lib/underscore-1.4.4.min.js"></script>
        <script src="lib/bootstrap.min.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers/EventController.js"></script>
    
    </head>
    
    <body>
        <div class="container">
            <div class="navbar-inner">
                <ul class="nav">
    
    
                </ul>
    
            </div>
            <div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
                <img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
                <div class="row">
                    <div class="span1">
                        <h2> {{event.name}}</h2>
                    </div>
    
                </div>
                <div class="row">
                    <div class="span2">
                        <div><strong>Date: </strong> {{event.date}}</div>
                        <div><strong>Time: </strong> {{event.time}}</div>
                    </div>
                    <div class="span3">
                        <address>
                    <strong> Address: </strong><br>
                        {{event.location.address}}<br>
                        {{event.location.city}}, {{event.location.province}}
                    </address>
                    </div>
                </div>
                
               
                
                <h3>Sessions</h3>
                <ul class="thumbnails">
                    <li ng-repeat="session in event.sessions" ></li>
                    <div class="row session">
                    <div class="well span9">
                        <h4 class="well-title">{{session.name}}</h4>
                        </div>
                    </div>
                   
                </ul>
            </div>
    
        </div>
    
    </body>
    
    </html>

＆＃13;

Answer 1

您需要在li代码

中添加div内容

更改此

<li ng-repeat="session in event.sessions" ></li>
        <div class="row session">
         <div class="well span9">
            <h4 class="well-title">{{session.name}}</h4>
        </div>
 </div>

到这个

<li ng-repeat="session in event.sessions">
      <div class="row session">
            <div class="well span9">
         <h4 class="well-title">{{session.name}}</h4>              
      </div>
   </div>
</li>

Demo

Answer 2

li元素的结束标记是在您引用Ng-repeat中的项目之前（可能是拼写错误）。我将HTML更新为以下内容：

<li ng-repeat="session in event.sessions">
    <div class="row session">
        <div class="well span9">
            <h4 class="well-title">{{session.name}}</h4>
       </div>
   </div>
</li>

AngularJS ng-repeat指令不适用于我的EventController.js

2 个答案: