Bild Bevölkerung dynamisch in einem div

Question

Ich muss dynamisch ein Bild füllen, indem ein Objekt iterieren (ng-Wiederholung)

bitte die Codes unter

<div class="row graph-img"> 
    <div class="col-sm-6" ng-repeat="option in subserviceObject.serviceRequest"> 
    <img ng-init="retreiveGraph(service,subservice,$index)" id="imgframe{{$index}}" src=""> 
    </div> 
</div> 

und mein Controller-Code zu finden, ist hier

$scope.retreiveGraph = function(serviceName,subservice,index) { 
    $scope.service=serviceName; 
    $scope.resetGrapghParam(serviceName,subservice,num); 
    $scope.displayServiceDetails(serviceName); 
    imgsrc='./service/getServiceDetails/'+$scope.service+'/'+$scope.initGrapghServiceName; 
    document.getElementById("imgframe"+index).setAttribute("src", imgsrc); 
}; 

Ich bekomme einen Fehler in der Konsole wie "Kann Eigenschaft 'setAttribute' von Null nicht lesen".

Wenn dies die falsche Lösung ist, schlagen Sie bitte vor, dieses Problem zu lösen.

bitte meine letzten HTML-Elemente finden, nachdem

<div class="row graph-img"> 
    <!-- ngRepeat: option in subserviceObject.serviceRequest --><div class="col-sm-6 ng-scope" ng-repeat="option in subserviceObject.serviceRequest"> 
    <img ng-init="retreiveGraph(service,subservice,$index)" id="imgframe0" src=""> 
</div><!-- end ngRepeat: option in subserviceObject.serviceRequest --> 
<div class="col-sm-6 ng-scope" ng-repeat="option in subserviceObject.serviceRequest"> 
    <img ng-init="retreiveGraph(service,subservice,$index)" id="imgframe1" src=""> 
</div><!-- end ngRepeat: option in subserviceObject.serviceRequest --><div class="col-sm-6 ng-scope" ng-repeat="option in subserviceObject.serviceRequest"> 
    <img ng-init="retreiveGraph(service,subservice,$index)" id="imgframe2" src=""> 
</div><!-- end ngRepeat: option in subserviceObject.serviceRequest --> 
</div> 

id Rendering richtig bevölkern, aber wenn ich versuche, es zu setAttribute kehren als null

Vielen Dank im Voraus

Answer 1

Angular eine Richtlinie muss konstruiere die src der img-tags, verwende sie:

<div class="row graph-img"> 
    <div class="col-sm-6" ng-repeat="option in subserviceObject.serviceRequest"> 
    <img ng-src="retreiveGraph(service,subservice,$index)"> 
    </div> 
</div> 

und dann in Ihrem Controller:

$scope.retreiveGraph = function(serviceName, subservice, index) { 
    $scope.service=serviceName; 
    $scope.resetGrapghParam(serviceName,subservice,num); 
    $scope.displayServiceDetails(serviceName); 
    return './service/getServiceDetails/' + $scope.service + '/' + $scope.initGrapghServiceName; 
}; 

Obwohl ich glaube, einige Konzepte der winkelförmigen Stangen missunderstood haben, wie $ Umfang und andere. Ich schlage vor, dass Sie einige Dokumentation lesen, bevor Sie damit fortfahren ...

Sie müssen nicht die Parameter in die Funktion für jede Iteration übergeben, wenn Sie sie für die $ Scope-Objekte haben, können Sie sie von dort erhalten direkt.