AngularJS怎么创建实时应用程序（项目示例） _创建实时应用程序

【AngularJS怎么创建实时应用程序（项目示例）】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>

输出如下：