在显示使用 AngularJS 获取的记录时，如何在视图中循环

How do I loop inside of a view when displaying records fetched with AngularJS?

本文关键字：视图 循环 记录 显示 AngularJS 获取      更新时间：2023-09-26

我开始学习AngularJS。我对JavaScript/jQuery有经验，但我现在很难理解AngularJS的基础知识。我有一个简短的问题要问任何有一点经验的人。

我有一个将显示"用户"（来自GET查询）的表。

每个"用户中的用户"都有如下架构：{name：''， rating：4， reviews：10}

评级是从 1 到 5 的整数，其中每个代表一颗星（共 5 颗可能的星）。对于评级中的每个整数，我想绘制一个显示一颗星星的 IMG 标签。

所以我有这样的东西：

<tbody>
    <tr ng-repeat="user in users">
        <td>{{user.name}}</td>
        <td>
            <img src="star.jpg" ng-repeat="n in 1 .. user.rating">
        </td>
        <td>{{user.reviews}}</td>
    </tr>
</tbody>

知道如何正确设置该循环吗？显然这是行不通的。我希望它使用 {{user.rating}} 来确定它需要画多少颗星。

感谢您的帮助。

使用 ng-repeat，我看到的唯一方法是在作用域中定义一个函数，返回一个包含 n 个元素的数组：

$scope.stars = function(amount) {
    var result = [];
    for (var i = 0; i < amount; i++) {
         result.push(i);
    }
    return result;
}

然后，在视图中，使用

ng-repeat="star in stars(user.rating)"

但您也可以定义自己的指令，该指令循环并显示指令的主体 N 次。

相关文章：