Ein Objekt in ein Array in Angular schieben

Muhammad Adil 23 Mai 2022
Ein Objekt in ein Array in Angular schieben

In diesem Artikel wird erläutert, wie ein Objekt mithilfe von AngularJS in ein Array verschoben wird. Wir werden dies mit Hilfe der Methode push() tun.

Die push()-Methode ist eine eingebaute Methode in AngularJS, die ein Objekt in ein bestehendes Array einfügt. Es benötigt zwei Argumente: das Objekt, das verschoben werden soll, und den Index der Position, an der das Objekt eingefügt werden soll.

Das erste Argument ist das Objekt, das in das Array verschoben wird, und sollte vom Typ Zeichenfolge, Zahl, Boolesch oder Null sein.

Das zweite Argument ist der Index, an dem dieses neue Element relativ zu der Stelle eingefügt werden soll, an der es zuvor eingefügt wurde. Wenn Sie zum Beispiel eine eindeutige Zeichenfolge nach einem Apfel einfügen möchten, würden Sie 1 verwenden, und wenn Sie sie davor einfügen möchten, verwenden Sie -1.

Die Push-API ermöglicht das Senden einer Nachricht von einem Server an einen Client, und die Benachrichtigungs-API ermöglicht die Anzeige der Nachricht, nachdem sie im Browser empfangen wurde. Wir können jedoch keine Benachrichtigungen direkt von unserem Server an den Webcomputer senden.

Schritte zum Schieben eines Objekts in ein Array in Angular

Die Methode push() akzeptiert ein Objekt oder Array und fügt es am Ende der Collection ein.

Der erste Schritt besteht darin, ein neues leeres Array mit einer Länge von zwei zu erstellen. Denn die push()-Methode kann immer nur ein Objekt oder Element auf einmal einfügen.

Der zweite Schritt besteht darin, ein Objekt mit zwei Eigenschaften zu erstellen: Name und Alter. Dies ist das Objekt, das wir in unser neues Array einfügen möchten.

Schließlich müssen wir die push()-Methode unseres neuen Arrays mit unserem neu erstellten Objekt als Argument aufrufen. Die push()-Methode fügt dieses Objekt in unser neues Array an seinem letzten Index ein, der in diesem Fall 0 (Null) wäre.

Beispiel für das Verschieben eines Objekts in ein Array in Angular

Lassen Sie uns ein verständliches Beispiel mit Hilfe der oben genannten Schritte diskutieren, um eine bessere Vorstellung davon zu bekommen, wie Sie ein Objekt mit AngularJS in ein Array schieben können.

HTML Quelltext:

<!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>

JavaScript-Code:

    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 = '';
        }
    }
    });

Klicken Sie hier, um die Live-Demonstration des oben genannten Codes zu überprüfen.

Muhammad Adil avatar Muhammad Adil avatar

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

Verwandter Artikel - Angular Array