AngularJS ng-repeat渲染用户Profile时图片重复问题求助

问题根源 #

所有Profile显示同一张图的原因是你使用了全局的$scope.imageSrc变量，每次赋值都会覆盖之前的值，最终所有列表项都只会读取最后一次赋值的图片URL。正确的做法应该是让每个Profile对象自身携带对应的图片地址，而非依赖全局变量。

修正后的简洁代码 #

<!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'>
                      <!-- 读取当前Profile自身的图片地址 -->
                      <img class="img-icon" ng-src="{{detail.image}}" />
                      <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) {
    // 初始化localStorage数据
    const initDetails = () => {
        const storedData = localStorage.getItem('details');
        return storedData ? JSON.parse(storedData) : [];
    };
    $scope.details = initDetails();

    // 定义带图片地址的用户数据集合
    const userProfiles = [
        {
            name: "Zandra",
            aboutYou: "Hi! it's me Zandra and I love Singing <3",
            image: "https://i.ibb.co/sbnRv3h/pix1.jpg"
        },
        {
            name: "Aaron",
            aboutYou: "Hi! it's me Aaron from San Antonio Texas",
            image: "https://i.ibb.co/v1c2s8f/pix2.jpg"
        },
        {
            name: "Jessica",
            aboutYou: "Hi! it's me Jessica and I really like Pokemon :)",
            image: "https://i.ibb.co/xCjYF5Y/pix3.jpg"
        }
    ];

    // 封装：检查用户是否存在，不存在则延迟添加
    const addUserIfNotExists = (user, delay) => {
        const isExist = $scope.details.some(item => item.name === user.name);
        if (!isExist) {
            $timeout(() => {
                $scope.details.unshift(user);
                localStorage.setItem("details", JSON.stringify($scope.details));
            }, delay);
        }
    };

    // 批量处理用户添加逻辑
    userProfiles.forEach((user, index) => {
        addUserIfNotExists(user, (index + 1) * 1000);
    });
});
</script>

</body>
</html>

关键修改说明 #

1. 图片与Profile绑定：给每个用户数据添加image属性，将图片URL和用户信息一一关联，彻底解决全局变量覆盖的问题。
2. 简化存储逻辑：封装初始化函数，减少重复的localStorage读取/写入操作。
3. 代码复用：将用户添加逻辑封装成通用函数，通过循环批量处理多个用户，避免冗余代码。
4. 模板数据绑定：在循环中读取当前项的detail.image，确保每个Profile显示对应的专属图片。

内容的提问来源于stack exchange，提问作者Hilario Abe