AngularJS 常被用于开发动态的单页 Web 应用，同时也非常有利于构建极具吸引力的用户界面。在某些场景下，我们需要在应用中以循环的方式打印元素，为了应对这种情况，我们可以使用 For Loop 来遍历数字，并利用 Ranges（范围）功能。在 Web 开发中，对数据或数字进行循环遍历，主要是为了执行操作，或者最常见的是为了动态生成内容。因此，在 AngularJS 中，我们可以通过数字与范围结合的 For Loop 来实现这一目标。在这篇文章中，我们将探讨如何使用 For Loop 结合数字和范围的几种方法。
配置 AngularJS 应用的步骤
我们将遵循以下步骤来配置 AngularJS 应用：
- 为该项目创建一个新的文件夹。这里我们使用 VSCode IDE，并在其集成终端中执行命令。
mkdir loop-range
cd loop-range
- 在新创建的文件夹中创建
index.html文件，我们将在这个文件中编写所有的逻辑和样式代码。当然，我们也可以分别为 HTML、CSS 和 JS 创建单独的文件。
目录
- 使用 ng-repeat（数字循环 For Loop）
- 使用自定义 ng-repeat 结合范围
我们将通过合适的方法来理解上述概念，并通过示例来了解其具体实现。
使用 ng-repeat（数字循环 For Loop）
在这种方法中，我们使用了 AngularJS 中的 ng-repeat 指令来创建数字的 For Loop。在这个示例中，我们设置了两个自定义按钮，其中一个按钮通过循环生成 1-10 的数字，另一个按钮则生成偶数。代码中使用了一个 $timeout 函数，用于管理生成输出的时间间隔。主要来说，本例中使用的 ng-repeat 用于遍历生成的数字数组，然后将它们动态显示在网页上。
示例： 下面是一个示例，演示了在 AngularJS 中如何使用 ng-repeat 配合数字来实现 For Loop。
HTML
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: green;
}
h3 {
color: blue;
}
.results-container {
display: flex;
justify-content: space-around;
}
.results-box {
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
width: 35%;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
GeeksforGeeks
方法 1: 使用 ng-repeat
(数字循环 For Loop)
点击生成 1-10 数字
点击生成 1-10 之间的偶数
生成的 1-10 数字:
-
{{ result }}
生成的 1-10 之间偶数:
-
{{ result }}
var app = angular.module("myApp", []);
app.controller("myController", function ($scope, $timeout) {
$scope.loopResults = {
numbers: [],
evenNumbers: []
};
$scope.num = false;
$scope.evenNum = false;
$scope.genNum = function () {
$scope.loopResults.numbers = [];
$scope.num = true;
for (var i = 1; i <= 10; i++) {
(function (number) {
$timeout(function () {
$scope.loopResults.numbers.push(
"生成的数字: " + number);
console.log("生成的数字:", number);
}, 1000 * number);
})(i);
}
};
$scope.genEvenNum = func