AngularJS ng-repeat 从数组填充网格

AngularJS

# 使用AngularJS的ng-repeat从数组填充网格

AngularJS是一个强大的JavaScript框架，用于构建单页面应用程序（SPA）。其中，ng-repeat指令为我们提供了一种便捷的方式，通过循环遍历数组中的元素，动态生成HTML内容。本文将介绍如何使用AngularJS的ng-repeat指令，从数组中填充网格，并提供一个简单的案例代码。

## 了解ng-repeat

在AngularJS中，ng-repeat是一个强大的指令，它允许我们在HTML中迭代遍历数组，并根据数组的内容生成对应的HTML元素。这对于动态生成重复结构的内容非常有用，比如在一个网格中显示一组数据。

## 使用ng-repeat填充网格

让我们通过一个简单的案例来演示如何使用ng-repeat从数组中填充网格。首先，我们定义一个AngularJS应用，并在控制器中创建一个包含数据的数组。

html
<div ng-app="gridApp" ng-controller="gridController">
  <div ng-repeat="item in data" class="grid-item">
    {{ item }}
  </div>
</div>

在这个例子中，我们使用ng-repeat指令遍历名为data的数组中的每个元素，并在网格中显示每个元素的内容。在实际应用中，你可以将data数组替换为你自己的数据源。

## 案例代码

下面是一个完整的AngularJS应用程序代码示例，演示了如何使用ng-repeat从数组中填充网格。

html
<!DOCTYPE html>
<html ng-app="gridApp">
<head>
  <title>AngularJS ng-repeat Grid</title>
  <style>
    .grid-item {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 5px;
      text-align: center;
      display: inline-block;
    }
  </style>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.6.9/angular.min.JS"></script>
</head>
<body ng-controller="gridController">
  <h2>网格展示</h2>
  <div ng-repeat="item in data" class="grid-item">
    {{ item }}
  </div>
  <script>
    var app = angular.module('gridApp', []);
    app.controller('gridController', function ($scope) {
      // 你的数据源
      $scope.data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个包含五个元素的数组，并使用ng-repeat在网格中显示每个元素。你可以根据需要调整数组中的元素数量和内容。

##

通过使用AngularJS的ng-repeat指令，我们能够轻松地从数组中动态填充网格。这是构建动态单页面应用的强大工具之一，使得前端开发更加灵活和高效。希望本文能够帮助你更好地理解和使用ng-repeat来构建自己的网格布局。