AngularJS 应用程序
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>输出：
第 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>输出：
步骤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>输出：
第 4 步：错误处理。
例如：如果在列表中添加了两次相同的subject ，则会显示错误消息。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
