Erstellen einer Checkbox-Liste in AngularJS

Dieses Tutorial zeigt das Erstellen einer einfachen Checkbox-Liste in AngularJS. Wir werden die Direktive ng-repeat verwenden, um über ein Array von Objekten zu iterieren, die eine Eigenschaft namens selected enthalten.

Wir werden auch das ng-Modell verwenden, um die ausgewählte Eigenschaft jedes Objekts im Array an eine Checkbox-Eingabe zu binden.

Schritte zum Erstellen einer Angular Checkbox-Liste

Die folgenden Schritte führen Sie zum Erstellen einer Angular-Checkbox-Liste.

Lassen Sie uns ein Beispiel besprechen, das uns beim Erstellen einer Angular-Checkbox-Liste helfen wird.

Wir müssen eine Entwicklungsumgebung einrichten, um mit dem Erstellen von Angular-Apps zu beginnen. Dazu werden wir NodeJS und das Angular-Tool CLI global auf unserem System installieren.

Führen Sie dazu den folgenden Befehl aus.

$ng new angular-checkbox-list-app

Danach schreiben wir die JavaScript- und HTML-Codes.

JavaScript-Code:

angular.module('sam', ['checklist-model'])
    .controller('demo', function($scope) {
        $scope.countryList = [
            { name: 'America'},
            { name: 'England'},
            { name: 'Canada'},
            { name: 'Scotland'}
        ];
        $scope.selected = {
            country: []
        };
    });

HTML Quelltext:

<div ng-app="sam">
    <div ng-controller="demo">
    <h2>
    Example of Angular Checkbox List
    </h2>
        <label ng-repeat="country in countryList"><input type="checkbox" checklist-model="selected.country" checklist-value="country" /> {{country.name}}<br/> </label>
        <br/>
        <p>
        Selection will show here
        </p>
        {{selected.country}}
	</div>
</div>

Ausgabe:

In diesem Beispiel haben wir eine Liste mit einigen Ländern geschrieben und hauptsächlich ng-repeat verwendet. Es wird verwendet, um die Daten in der Tabelle, Liste oder einer anderen UI-Komponente anzuzeigen.

Darüber hinaus ist es einfach zu bedienen, intuitiv und bietet viele Anpassungen. Schließlich können Sie in der Angular-Checkbox-Liste Elemente einfach hinzufügen oder entfernen, ohne den gesamten Code zu beschädigen. Es macht eine Liste flexibel für Ihre Bedürfnisse.

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