AngularJS中如何使用ng-repeat指令实现图片重复渲染？

直接按以下步骤操作 #

你的ng-repeat没生效，要么是AngularJS环境没配置对，要么是没给指令提供对应的数据源，照着做就能解决：

1. 搭建AngularJS基础环境
   页面必须先引入本地的AngularJS脚本文件，同时给根标签添加ng-app指令，并指定控制器，示例结构如下：

<!DOCTYPE html>
<html ng-app="myWebsiteApp">
<head>
    <script src="angular.min.js"></script> <!-- 替换为你本地AngularJS文件的实际路径 -->
    <link href="bootstrap.min.css" rel="stylesheet"> <!-- 本地Bootstrap样式文件路径，用于保持卡片样式正常 -->
</head>
<body ng-controller="ImageCardController">
    <!-- 卡片渲染代码放在这里 -->
</body>
</html>

2. 定义控制器与重复数据源
   在页面中添加脚本，创建AngularJS应用和控制器，并定义items数组——数组的元素数量就是图片重复渲染的次数，也可以在每个元素中存储图片路径、卡片标题等自定义信息：

<script>
    // 初始化AngularJS应用
    var app = angular.module('myWebsiteApp', []);
    // 定义控制器
    app.controller('ImageCardController', function($scope) {
        // 示例：要重复渲染3次，每个元素存储图片路径和卡片标题
        $scope.items = [
            {imgPath: "../src/images/tube.webp", cardTitle: "卡片标题1"},
            {imgPath: "../src/images/tube.webp", cardTitle: "卡片标题2"},
            {imgPath: "../src/images/tube.webp", cardTitle: "卡片标题3"}
        ];
        // 若只需单纯重复同一张图片，可简化为 $scope.items = new Array(3);
    });
</script>

3. 修正ng-repeat卡片代码
   将图片路径和卡片标题与数组元素的属性绑定，注意图片要使用ng-src（避免AngularJS解析表达式前，浏览器加载无效路径）：

<br/>
<div class="card" style="width: 18rem;" ng-repeat="item in items track by $index">
    <img ng-src="{{item.imgPath}}" class="card-img-top" alt="重复展示的图片">
    <div class="card-body">
        <h5 class="card-title">{{item.cardTitle}}</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

关键注意事项 #

• 必须用ng-src替代普通src，否则AngularJS还未解析表达式时，浏览器会尝试加载{{item.imgPath}}这个无效路径。
• track by $index用于避免数组元素重复时的报错，无论数组元素是否唯一，添加该语句都能避免问题。
• 确保items数组在控制器中正确定义，且页面的ng-controller指令与控制器名称对应一致。

内容的提问来源于stack exchange，提问作者milad rostami