Introducir un objeto en un array en Angular
Este artículo discutirá cómo insertar un objeto en un array usando AngularJS. Haremos esto con la ayuda del método push().
El método push() es un método incorporado en AngularJS que inserta un objeto en un array existente. Toma dos argumentos: el objeto a empujar y el índice de la posición para insertar el objeto.
El primer argumento es el objeto que se insertará en la matriz y debe ser de tipo string, number, boolean, o null.
El segundo argumento es el índice en el que insertar este nuevo elemento en relación con el lugar donde se insertó antes. Por ejemplo, si desea insertar una cadena única después de una manzana, usaría 1 y si va a insertarla antes, use -1.
La API de inserción permite enviar un mensaje desde un servidor a un cliente, y la API de notificaciones permite que el mensaje se muestre después de que se recibió en el navegador. Sin embargo, no podemos enviar notificaciones directamente desde nuestro servidor a la computadora web.
Pasos para insertar un objeto en un array en Angular
El método push() acepta un objeto o array y lo inserta al final de la colección.
El primer paso es crear un nuevo array vacía y tener una longitud de dos. Esto se debe a que el método push() solo puede insertar un objeto o elemento a la vez.
El segundo paso es crear un objeto con dos propiedades: Name y Age. Este será el objeto que queremos insertar en nuestro nuevo array.
Finalmente, necesitamos llamar al método push() de nuestro nuevo array con nuestro objeto recién creado como argumento. El método push() insertará este objeto en nuestro nuevo array en su último índice, que en este caso sería 0 (cero).
Ejemplo de inserción de un objeto en un array en Angular
Analicemos un ejemplo comprensible con la ayuda de los pasos mencionados anteriormente para tener una mejor idea de cómo insertar un objeto en un array usando AngularJS.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demo">
<form ng-controller="Sample as test" ng-submit="test.addText(test.myText)">
<input type="text" ng-model="test.myText" value="food">
<button type="submit">Add</button>
<div ng-repeat="item in test.arrayadd">
<span>{{item}}</span>
</div>
</form>
</body>
</html>
Código JavaScript:
var app = angular.module('demo', []);
app.controller('Sample', function($scope) {
this.arrayadd = [{
text: 'Name',
}, {
text: 'Age'
}, ]
this.addText = function(text) {
if (text) {
var obj = {
text: text
};
this.arrayadd.push(obj);
this.myText = '';
}
}
});
Haga clic aquí para ver la demostración en vivo del código mencionado anteriormente.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook