不同的图像 url 每个配置文件 (ng-repeat)(ng-src)

Question

每次出现个人资料详细信息时，我都希望每个人的个人资料都有不同的图片网址。但是发生的事情是它只针对 $scope.imgSrc 上的最后一个 url，所以它们都有相同的图片，我不喜欢 :(

我已经这样做了，但它不起作用:(

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile Details AngularJS</title>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://static.staticsave.com/mycodestyle/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
</head>
<body>

    <div class="container" ng-app="DetailApp">
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 commentBox">
           <div ng-controller="PostController">
                   <h4>Show profile details</h4>       
                <ul>
                  <li ng-repeat='detail in details track by $index'>
                    <div class='detail'>
                      <img class="img-icon" ng-src="{{imageSrc}}" />
                      <div class="com">
                        <span><a href="javascript:void(0);">{{detail.name}}</a></span> {{detail.aboutYou}}
                      </div>
                    </div>
                  </li>
                </ul>              
           </div>
        </div> 
</div>


<script>

var app = angular.module('DetailApp', []);

app.controller('PostController', function($scope, $timeout) {
                
                                // tie the view to ngModule which saves the JSON to localStorage
                $scope.details = localStorage.getItem('details','imageSrc');
                $scope.details = (localStorage.getItem('details','imageSrc')!==null) ? JSON.parse($scope.details) : [];
                localStorage.setItem('details', JSON.stringify($scope.details));


                    var xtimeout = $timeout(function() {
                    $scope.details.unshift({
                        name: "Zandra",
                        aboutYou: "Hi! it's me Zandra and I love Singing <3"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 1000); 

                    var xtimeout2 = $timeout(function() {
                    $scope.details.unshift({
                        name: "Aaron",
                        aboutYou: "Hi! it's me Aaron from San Antonio Texas"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 2000); 

                    var xtimeout3 = $timeout(function() {
                    $scope.details.unshift({
                        name: "Jessica",
                        aboutYou: "Hi! it's me Jessica and I really like Pokemon :)"
                    });
                    localStorage.setItem("details", JSON.stringify($scope.details));
                }, 3000); 

                    var logName = $scope.details.some((xdetail)=> xdetail.name === "Zandra");
                    var logName2 = $scope.details.some((xdetail)=> xdetail.name === "Aaron");
                    var logName3 = $scope.details.some((xdetail)=> xdetail.name === "Jessica");

                
                if (logName === true) {
                    $scope.imageSrc='https://i.ibb.co/sbnRv3h/pix1.jpg';
                  $timeout.cancel(xtimeout);                     
                } else {
                    $scope.imageSrc='https://i.ibb.co/sbnRv3h/pix1.jpg';
                }

                if (logName2 === true) {
                    $scope.imageSrc='https://i.ibb.co/v1c2s8f/pix2.jpg';
                  $timeout.cancel(xtimeout2);
                } else {
                    $scope.imageSrc='https://i.ibb.co/v1c2s8f/pix2.jpg';
                }


                if (logName3 === true) {
                    $scope.imageSrc='https://i.ibb.co/xCjYF5Y/pix3.jpg';
                  $timeout.cancel(xtimeout3);
                } else {
                    $scope.imageSrc='https://i.ibb.co/xCjYF5Y/pix3.jpg';
                }
                
});

</script>

</body>
</html>

我不知道该怎么办我是 angularJS 的新手，我的脚本已经一团糟所以尽快帮我解决这个问题，如果可能的话，我也需要任何干净的版本。

不同的图像 url 每个配置文件 (ng-repeat)(ng-src)

问题描述投票：0回答：0

最新问题

不同的图像 url 每个配置文件 (ng-repeat)(ng-src)

问题描述 投票：0回答：0

最新问题

问题描述投票：0回答：0