AngularJS 应用程序

作者 : 慕源网 本文共2960个字,预计阅读时间需要8分钟 发布时间: 2022-05-2 共74人阅读

AngularJS 应用程序,AngularJS中的应用程序支持创建实时应用程序。在AngularJS中创建应用程序有四个主要步骤:

  • 为应用程序创建列表。
  • 在列表中添加元素。
  • 从列表中删除元素。
  • 错误处理

以下是创建Subject 列表应用程序的步骤:

第 1 步:首先,选择要创建的列表。然后使用,控制器和ng-repeat指令将数组的元素显示为列表。

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []);
app.controller("my_Ctrl", function($scope) {
	$scope.name = [
			"English", "Maths", "Economics"];
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
<ul>
	<li ng-repeat="var in name">{{var}}</li>
</ul>
</div>

</body>
</html>

输出:

AngularJS 应用程序

第 2 步:使用ng-model指令,在您的应用程序中使用文本输入。在控制器中,创建一个名为 addNewSubject 的函数,并使用 addSubject 输入字段的值添加到“name”数组。

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []);
app.controller("my_Ctrl", function($scope) {
	$scope.name = ["English", "Maths", "Economics"];
	$scope.addingNewSubject = function () {
		$scope.name.push($scope.addSubject);
	}	
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
<ul>
	<li ng-repeat="x in name">{{x}}</li>
</ul>
<input ng-model="addSubject">
<button ng-click="addingNewSubject()">Add</button>
</div>
<p>Use input field for adding new subjects.</p>
</body>
</html>

输出:

AngularJS 应用程序

AngularJS 应用程序

AngularJS 应用程序

步骤3:要删除subject,请使用索引作为参数创建一个remove 函数。并为它们提供一个ng-click指令以调用remove函数。
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []);
app.controller("my_Ctrl", function($scope) {
	$scope.name = ["English", "Maths", "Economics"];
	$scope.addingNewSubject = function () {
		$scope.name.push($scope.addSubject);
	}
	$scope.remove = function (x) {
		$scope.name.splice(x, 1);
	}
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
<ul>
	<li ng-repeat="x in name">
		{{x}}<span ng-click="remove($index)">×</span></li>
</ul>
<input ng-model="addSubject">
<button ng-click="addingNewSubject()">Add</button>
</div>
<p>Use cross icon for removing subjects.</p>
</body>
</html>

输出:

AngularJS 应用程序

AngularJS 应用程序

第 4 步:错误处理。

例如:如果在列表中添加了两次相同的subject ,则会显示错误消息。

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">
	GeeksforGeeks
</h1>
<body>

<script>
var app = angular.module("Subjects", []);
app.controller("my_Ctrl", function($scope) {
	$scope.name = ["English", "Maths", "Economics"];
	
	$scope.addingNewSubject = function () {
		$scope.errortext = "";
		if (!$scope.addSubject) {return;}		
		if ($scope.name.indexOf($scope.addSubject) == -1) {
			$scope.name.push($scope.addSubject);
		} else {
			$scope.errortext =
			"This subject is already in the list.";
		}
	}
	
	$scope.remove = function (x) {
		$scope.errortext = "";
		$scope.name.splice(x, 1);
	}
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
<ul>
<li ng-repeat="x in name">
	{{x}}<span ng-click="remove($index)">×</span>
	</li>
</ul>
<input ng-model="addSubject">
<button ng-click="addingNewSubject()">Add</button>
	
<p>{{errortext}}</p>
</div>
<p>Use cross icon for removing subjects.</p>
</body>
</html>

输出:

AngularJS 应用程序

AngularJS 应用程序


慕源网 » AngularJS 应用程序

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录