Las aplicaciones en AngularJS permiten la creación de aplicaciones en tiempo real. Hay cuatro pasos principales involucrados en la creación de aplicaciones en AngularJS:
- Creación de Lista para una Aplicación.
- Adición de elementos en la Lista.
- Eliminación de elementos de la Lista.
- Manejo de errores
A continuación se muestran los pasos para la creación de una aplicación de lista de materias:
Paso 1: Para comenzar, elija la lista que desea crear. Luego, el uso, el controlador y la directiva ng-repeat muestran los elementos de la array como una lista.
<!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>
Producción:
Paso 2: use el campo de texto en su aplicación con la ayuda de la directiva ng-model . En el controlador, haga una función llamada addNewSubject y use el valor del campo de entrada addSubject para agregar un tema a la array ‘name’. Agregue un botón, para agregar un nuevo tema usando una directiva 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">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>
Producción:
Paso 3: para eliminar un tema, haga una función de eliminación con el índice como parámetro. Para cada tema, crea un elemento de intervalo y dales una directiva ng-click para llamar a la función de eliminación.
<!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>
Producción:
Paso 4: los errores deben manejarse con cuidado.
Por ejemplo: si el mismo tema se agrega dos veces en la lista, muestra un mensaje de error.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA