AngularJS ng-repeat 指令及示例

由： 詹姆斯·哈特曼 詹姆斯·哈特曼
Hours 更新

AngularJS 中的 ng-repeat 指令

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

AngularJS ng-repeat 指令示例

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

AngularJS 中的 ng-repeat 指令

<!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. 然后将 TopicsNames 数组添加到名为“topics”的成员变量并附加到我们的范围对象。
  3. 我们使用的 HTML 标签（无序列表）和（列表项）显示数组中的项列表。然后我们使用 ng-repeat 指令遍历数组中的每个项。单词“tpname”是一个变量，用于指向数组topics.TopicNames中的每个项。
  4. 在此，我们将显示每个数组项的值。

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

输出：

AngularJS 中的 ng-repeat 指令

AngularJS 多个控制器

一个高级控制器示例是角度 JS 应用程序中拥有多个控制器的概念。

您可能希望定义多个控制器来分离不同的业务逻辑功能。前面我们提到过在控制器中使用不同的方法，其中一种方法具有用于数字加减的单独功能。好吧，您可以拥有多个控制器来实现更高级的逻辑分离。例如，您可以拥有一个控制器只对数字进行操作，另一个控制器对字符串进行操作。

让我们看一个例子，了解如何在 angular.JS 应用程序中定义多个控制器。

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">
	<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 多个控制器

总结

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

你可能会喜欢：