Pousser un objet dans un tableau en Angular
Cet article discutera de la poussée d’un objet dans un tableau à l’aide d’AngularJS. Nous allons le faire à l’aide de la méthode push().
La méthode push() est une méthode intégrée à AngularJS qui insère un objet dans un tableau existant. Il prend deux arguments : l’objet à pousser et l’index de la position pour insérer l’objet.
Le premier argument est l’objet qui sera poussé dans le tableau et doit être de type chaîne, nombre, booléen ou null.
Le deuxième argument est l’index auquel insérer ce nouvel élément par rapport à l’endroit où il a été inséré auparavant. Par exemple, si vous souhaitez insérer une chaîne unique après an apple, vous utiliserez 1 et si vous l’insérez avant, utilisez -1.
L’API Push permet d’envoyer un message d’un serveur à un client, et l’API Notifications permet au message de s’afficher après sa réception sur le navigateur. Cependant, nous ne pouvons pas envoyer de notifications directement de notre serveur à l’ordinateur Web.
Étapes pour pousser un objet dans un tableau en Angular
La méthode push() accepte un objet ou un tableau et l’insère à la fin de la collection.
La première étape consiste à créer un nouveau tableau vide et à avoir une longueur de deux. En effet, la méthode push() ne peut insérer qu’un seul objet ou élément à la fois.
La seconde étape consiste à créer un objet avec deux propriétés : Name et Age. Ce sera l’objet que nous voulons insérer dans notre nouveau tableau.
Enfin, nous devons appeler la méthode push() de notre nouveau tableau avec notre objet nouvellement créé comme argument. La méthode push() insérera cet objet dans notre nouveau tableau à son dernier index, qui dans ce cas serait 0 (zéro).
Exemple de poussée d’un objet dans un tableau en Angular
Discutons d’un exemple compréhensible à l’aide des étapes mentionnées ci-dessus pour avoir une meilleure idée de la façon de pousser un objet dans un tableau à l’aide d’AngularJS.
Code 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>
Code 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 = '';
}
}
});
Cliquez ici pour vérifier la démonstration en direct du code mentionné ci-dessus.
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