Question

我需要通过迭代对象（ng-repeat）来动态填充图像

请找到以下代码

<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>

我的控制器代码在这里

$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);
};

我在控制台中遇到错误，如＃34;无法读取属性＆＃39; setAttribute＆＃39; of null＆＃34;。

如果这是解决此问题的错误方法，请建议我解决此问题。

请在渲染后找到我的最终HTML元素

<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正确填充，但是当我尝试setAttribute时，它返回为null

提前致谢

Answer 1

Angular有一个指令来构造img标签的src，使用它：

<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>

然后在你的控制器中：

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

虽然我认为你已经误解了Angulars的一些概念，比如$ scope和其他。我建议你在继续阅读之前阅读一些文档...

您不需要为每次迭代将参数传递给函数，如果您在$ scope对象上有它们，您可以直接从那里获取它们。

图像在div中动态变化

1 个答案: