Angular 中的 for 迴圈

Rana Hasnain Khan 2022年4月20日
Angular 中的 for 迴圈

我們將介紹 for 迴圈並使用 AngularJs 中的 for 迴圈顯示資料。

Angular 中的 for 迴圈

for 迴圈很方便,它用於多次重複程式碼以顯示資料。

為了理解它,讓我們看一個 AngularJs 中的 for 迴圈示例。首先,我們將建立一個模板。

 angularjsCopy# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>{{n}}</h1>
</div>

在上面的程式碼中,我們使用了 ng-repeat。現在,讓我們編寫一個 for 迴圈來顯示 n 的值。

 angularjsCopy# angularjs
var myApp = angular.module('ForApp', []);
myApp.filter('repeat', function() {
  return function(input, range) {
    range = parseInt(range);
    for (var i=0; i<range; i++)
      input.push(i);
    return input;
  };
});

上面的程式碼將輸出 n 值五次。

angularjs 中的 for 迴圈

正如你在影象中看到的,上面的程式碼顯示了五次 n 的值五次。我們還可以使用 for 迴圈多次重複特定的 HTML 程式碼。

 angularjsCopy# angularjs
<div ng-app='ForApp' ng-repeat="n in [] | repeat:5">
    <h1>Repeated for {{n}} times</h1>
</div>

輸出:

angularjs 中的 for 迴圈用於重複

這樣,我們可以在 AngularJs 中使用 for 迴圈。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - Angular Loop