AngularJS中的应用程序允许创建实时应用程序。在AngularJS中创建应用程序涉及四个主要步骤：
- 创建应用程序列表。
- 在列表中添加元素。
- 从列表中删除元素。
- 错误处理
以下是创建主题列表应用程序的步骤：
第1步：首先, 选择要创建的列表。然后, 使用controller和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" >lsbin</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模型指示。在控制器中, 创建一个名为addNewSubject的函数, 并使用addSubject输入字段的值将一个主题添加到"名称"数组。添加按钮, 以使用ng-click指令添加新主题。
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<h1 style= "color: green" >lsbin</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>输出如下：
第三步：要删除主题, 请使用索引作为参数来实现删除功能。对于每个主题, 创建一个跨度项目, 并为其指定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" >lsbin</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：错误需要仔细处理。
例如：
如果同一主题两次添加到列表中, 则会显示一条错误消息。
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<h1 style= "color: green" >
lsbin
</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>输出如下：
