AngularJS星星打印及内循环结束换行问题排查求助

嘿，我来帮你搞定这个星星打印的问题！先给你一个可以直接运行的修正版代码，再拆解一下常见错误点和优化思路。

完整可运行代码 #

<!DOCTYPE html>
<html ng-app="starPrinter">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="StarController">
    <!-- 用div包裹每行，利用块级元素特性自动换行 -->
    <div ng-repeat="row in getRows(5) track by $index">
        <span ng-repeat="star in getStars($index + 1) track by $index">*</span>
    </div>
</body>
<script>
    angular.module('starPrinter', [])
    .controller('StarController', function($scope) {
        // 生成指定行数的数组供外层循环遍历
        $scope.getRows = function(totalRows) {
            return new Array(totalRows);
        };
        
        // 根据传入数量生成对应长度的数组，供内层星星循环使用
        $scope.getStars = function(count) {
            return new Array(count);
        };
    });
</script>
</html>

这段代码会打印5行递增的星星（第一行1个，第二行2个…第五行5个），每行自动换行。

你的代码可能踩的坑 #

我推测你大概率遇到了以下几个常见问题：

• 直接遍历数字而非数组：AngularJS的ng-repeat只能遍历集合（数组/对象），不能直接遍历数字。所以需要像上面的getRows/getStars这样的辅助函数，把数字转换成对应长度的数组。
• 未处理换行逻辑：如果所有星星都放在行内元素（比如<span>）里，它们会挤在一行。用<div>包裹每行（利用块级元素自动换行），或者在每行末尾加<br>标签，都能解决换行问题。
• 嵌套循环关联错误：可能外层循环和内层循环的逻辑没绑定好，比如内层循环没有根据当前行数调整星星数量。

灵活调整需求 #

如果想要打印正方形星星（比如5行5列），只需要把内层循环的星星数量改成固定值：

<div ng-repeat="row in getRows(5) track by $index">
    <span ng-repeat="star in getRows(5) track by $index">*</span>
</div>

如果想要倒序打印（第一行5个，最后一行1个），把内层的$index + 1改成5 - $index即可。

内容的提问来源于stack exchange，提问作者Santosh Kumar