ng-Repeat-Elemente werden nicht angezeigt

In meiner Anwendung mache ich eine Anfrage erhalten durch Angulars http-Dienst und in der Ansicht Schleife über die zurückgegebenen Daten, um eine ungeordnete Liste anzuzeigen. Das Problem besteht jedoch darin, dass Daten nach der get-Anforderung verfügbar sind und nicht auf der Seite angezeigt werden. Scheint ein Problem im CSS-Stil zu sein, aber ich weiß nicht, wie ich es beheben kann. Ich möchte die Unorder-Liste in einem Bootstrap-Panel als Body zeigen.ng-Repeat-Elemente werden nicht angezeigt

Unterhalb das Winkelstück Code innerhalb des Controlller ist, die Daten für die Einrichtung

$http.get('/messages').success(function(data) { 
     console.log("Messages are "+data); 
     $scope.records=data; 
    });

Hier ist die HTML

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8" /> 
    <title>jQuery Bootstrap News plugin</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <link rel="stylesheet" href="/libs/css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="/libs/css/font-awesome.min.css"/> 
    <link rel="stylesheet" href="/libs/css/custom.css"/> 
    <script src="/libs/js/jquery-3.0.0.min.js" type="text/javascript"></script> 
    <script src="/libs/js/newsbox.min.js" type="text/javascript"></script> 
    <script src="/libs/js/angular.min.js" type="text/javascript"></script> 
    <script src="/libs/js/main.js" type="text/javascript"></script> 

</head> 

<body ng-app="mean" ng-controller="MainCtrl"> 
    <br/> 

    <div class="container"> 
     <div class="row"> 
     <div class="col-md-6"> 

      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <span class="glyphicon glyphicon-list-alt"></span><b> What you wanna do before you die ...</b> 
      </div> 
      <div ng-cloak class="panel-body"> 
       <div class="row"> 
       <div class="col-xs-12">     
        <ul class="demo1">      
         <li class="news-item" ng-repeat="item in records">      
         <table cellpadding="4">       
          <tr> 
          <td > 
          <img class="img-circle" width="60" 
            ng-src="/images/{{($index+11) % 10}}.png"/> 
          </td> 
          <td ng-cloak> 
           {{$index+1}}. {{item.username}} 
          </td> 
          </tr>        
         </table>       
         </li>      
        </ul>      
       </div> 
       </div> 
      </div>    
      <div class="panel-footer"></div>    
      </div> 
     </div>   
    </div> 

     <div class="row"> 
    <div class="col-md-2 col-md-offset-1 "> 
    <form name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box"> 
     <div class="form-group"> 
     <textarea required ng-model="formModel.message" 
       style="background-color:#ffffe6;border:double 4px orange;border-radius: 0.5em;"      rows="3" cols="50" id="message" placeholder="Write your message and press enter..">   </textarea>  

      <button class="btn btn-primary" type="submit">Shoot it</button> 
     </div> 
     <p ng-cloak class="help-block" ng-show="formModel.nameError">Looks like you forgot to mention your name !!!</p> 
     <p ng-cloak class="help-block" ng-show="formModel.messageEmpty">Really you don't wanna do anything before you die !!! </p> 
     <p ng-cloak class="help-block" ng-show="formModel.messageTooLong">You are trying to do too many things buddy, just 150 characters !!! </p> 
    </form> 
</div>    
     </div> 


</div> 

<script type="text/javascript"> 
    $(function() { 
     $(".demo1").bootstrapNews({ 
      newsPerPage: 12, 
      autoplay: true, 
      pauseOnHover:true, 
      direction: 'up', 
      newsTickerInterval: 4000, 
      onToDo: function() { 
       //console.log(this); 
      } 
     }); 

    }); 
</script> 


</body> 

</html>

Wenn I Chrom dev Werkzeug überprüfen durch, sind Daten vorhanden, dass Ungeordnete Liste, Daten sind vorhanden, werden aber im Bootstrap-Panel nicht richtig angezeigt.

sehen, dieses Bild

ich bemerkte, dass es an der Unterseite der ungeordneten Liste ein undefiniertes Element ist, während er durch Entwickler-Tools zu überprüfen. Irgendeine Idee, was schief geht?

Der Plattenkörper ist leer

Quelle

2016-07-10 Mahtab Alam

In dem Array. Gibt es irgendwelche undefinierten Elemente? – Ashan

Das Problem könnte sein, weil sowohl Angular als auch jQuery versuchen, die gleichen DOM-Elemente zu manipulieren. – Lex

hi @Ashan gibt es kein undefiniertes Element in den Daten zurückgegeben –

Warum ist der [ul] Tag Stil auf "height: 0px; Überlauf-y: hidden"? - dies würde verstecken Ihre Inhalte

Sie auch die ng-Mantel an den div.panel-Körper auf die div.row bewegen konnte und entfernen Sie sie vom Kind td

Verzögerung bootstrapNews Bindung

$(function(){ 
    if ($('.panel-body[ng-cloak]').length > 0) 
     return window.setTimeout(arguments.callee, 10); 

    $(".demo1").bootstrapNews({...}); 
});

Quelle

2016-07-10 03:44:24 Steve

Ich habe die CSS-Höhe entfernt: 0px; overflow-y: Versteckt, was von einem der Bibliothek https://github.com/gagi270683/jQuery-bootstrap, die ich verwendet wurde, angewendet wurde, ein Problem, obwohl es ein undefiniertes Tag nach dem letzten li ist. Wo das herkommt, habe ich das nicht in meinem Markup. Und jetzt funktioniert das eigentliche jquery-Plugin, das ich benutze, um in den Nachrichten nach unten zu scrollen, möglicherweise wegen dieses undefinierten Tags nicht.Bitte beachten Sie die aktualisierte Frage –

Es kann für die "bootstrapNews" kommen --- Deaktivieren Sie dies zu überprüfen und vielleicht bis nach den eckigen Bindungen zu verzögern – Steve

Ja @Steve, dass undefined war wegen BootstrapNews, wenn ich es deaktiviert, undefiniert Disapear. Wie kann ich es verzögern, so dass es funktioniert, nachdem Angular –

glaube ich Ihnen eine Richtlinie für die Zeugung eines Rückruf schreiben sollte, wenn ng-Wiederholung durchgeführt wird, und das ist eine bessere Lösung anstelle einer ‚Verspätung‘ Taktik.

könnten Sie durch zu gehen, helfen, wie ich getan habe in meinem Code- eine Richtlinie verwendet, um zu emittieren ein fertiges Ereignis machen:

dashboard.directive('onFinishRender', function ($timeout) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      if (scope.$last === true) { 
       $timeout(function() { 
        scope.$emit(attr.onFinishRender); 
       }); 
      } 
     } 
    } 
});

Im Controller ich den Ereignis-Listener halten:

$scope.$on('dataLoaded', function(ngRepeatFinishedEvent) { 
     // your code to add bootstrapNews binding 
    });

und in der HTML-Seite, rufe ich sie so:

<div class="add_tenant_name" ng-repeat="tenant in tenants" on-finish-render="dataLoaded"> 
    // more divs 
</div>

Quelle

2016-07-15 11:27:40 kukkuz

danke @kukkuz Ich tat das, ich werde meine Antwort posten, danke, dass du dir Zeit genommen hast, deinen Punkt zu schreiben. Das habe ich mit einer Direktive erreicht. –

ng-Repeat-Elemente werden nicht angezeigt

Antwort

Verwandte Themen