AngularJS ng-repeat 指令及示例

作者： James Hartman James Hartman
小时 - 权威教程 更新于

AngularJS 中的 ng-repeat 指令

AngularJS 中的 ng-repeat 指令用于显示控制器中定义的重复值。有时我们需要在视图中显示项目列表。ng-repeat 指令帮助我们将控制器中定义的一系列项目显示到视图页面。

AngularJS ng-repeat 指令示例

让我们来看一个 AngularJS 中 ng-repeat 指令的例子

ng-repeat Directive in AngularJS

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
<h1>Topics</h1>
<ul><li ng-repeat="tpname in TopicNames">
		{{tpname.name}}
		</li></ul>
</div>

<script> 
	var app = angular.module('DemoApp',[]);
	app.controller('DemoController', function($scope){

	$scope.TopicNames =[
		{name: "What controller do from Angular's perspective"},
		{name: "Controller Methods"},
		{name: "Building a basic controller"}];	
		});
</script>

</body>
</html>

代码解释

  1. 在控制器中，我们首先定义了要在视图中定义的项目列表数组。在这里，我们定义了一个名为“TopicNames”的数组，其中包含三项。每项都包含一个名称-值对。
  2. 然后将 TopicNames 数组添加到名为“topics”的成员变量中，并将其附加到我们的作用域对象。
  3. 我们使用
      (无序列表) 和
    • (列表项) 的 HTML 标签来显示数组中的项目列表。然后我们使用 ng-repeat 指令来遍历数组中的每一项。单词“tpname”是一个变量，用于指向 topics.TopicNames 数组中的每一项。
    • 在这里，我们将显示每个数组项的值。

如果代码执行成功，当您在浏览器中运行代码时，将显示以下输出。您将看到数组中的所有项目（基本上是 topics 中的 TopicNames）。

输出

ng-repeat Directive in AngularJS

AngularJS 多个控制器

更高级的控制器示例将是拥有多个控制器的概念，适用于 Angular JS 应用程序。

您可能希望定义多个控制器来分隔不同的业务逻辑函数。之前我们提到了在一个控制器中有不同的方法，其中一个方法具有单独的加法和减法功能。您可以使用多个控制器来实现更高级的逻辑分离。例如，您可以有一个只处理数字的控制器，另一个处理字符串的控制器。

让我们看一个如何在 Angular.JS 应用程序中定义多个控制器的示例。

AngularJS Multiple Controllers

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>

<div ng-app="DemoApp">
	<div ng-controller="firstcontroller">
		<div ng-controller="secondcontroller">
		{{lname}}
		</div>
	</div>
</div>

<script>
	var app = angular.module('DemoApp',[]);
	app.controller('firstcontroller', function($scope){
		$scope.pname="firstcontroller";
			});
		app.controller('secondcontroller', function($scope){
			$scope.lname="secondcontroller";
			});
</script>
</body>
</html>

代码解释

  1. 这里我们定义了两个控制器，名为“firstController”和“secondController”。对于每个控制器，我们还添加了一些处理代码。在我们的 firstController 中，我们附加了一个名为“pname”的变量，其值为“firstController”，在 secondController 中，我们附加了一个名为“lname”的变量，其值为“secondController”。
  2. 在视图中，我们访问两个控制器并使用第二个控制器中的成员变量。

如果代码执行成功，当您在浏览器中运行代码时，将显示以下输出。正如预期的那样，您将看到“secondController”的所有文本。

输出

AngularJS Multiple Controllers

摘要

  • AngularJS 中的 ng-repeat 指令用于显示多个重复项。
  • 我们还看了一个高级控制器，它涉及应用程序中多个控制器的定义。