Ng-Model an eine Liste von Radio-Buttons in Angular binden
Wenn ein Webseitenbenutzer ein Element aus mehreren Optionen auswählt, hilft das erneute Anzeigen des ausgewählten Elements unter der Liste der Optionen dem Benutzer, seine Wahl zu verstehen. Dies ermöglicht es dem Benutzer, einfach mit der nächsten Aufgabe auf der Webseite fortzufahren.
Angular Funktionen wie diese sind ideal für die Entwicklung einer E-Commerce-Website. Damit die Website das ausgewählte Element anzeigt, betrachten wir die Verwendung des ng-model, um diese Funktion auszuführen.
Das ng-Modell kann an eine Liste von Optionsfeldern auf einer Webseite gebunden werden, und wir werden zwei verschiedene Methoden kennenlernen, um diese Funktionen auszuführen.
Verwenden Sie ng-model mit der $scope-Funktion, um ng-model an eine Liste von Optionsfeldern in Angular zu binden
Dieses einfache Beispiel definiert das ng-model in der index.html. Der HTML-Code sieht so aus.
HTML Quelltext:
<!DOCTYPE html>
<hmtl ng-app="testApp">
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<form>
<div ng-repeat="option in occurrenceOptions track by $index">
<input type="radio" name="occurrences" ng-value="option"
ng-model="model.selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>
Dann führen wir in der Datei script.js die Funktion $scope innerhalb des Controllers aus. Das $scope hilft dabei, den Controller an das HTML zu binden, wo wir die Codierungen für das ng-model vorgenommen haben.
JavaScript-Code:
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.occurrenceOptions = [];
$scope.occurrenceOptions.push('previous');
$scope.occurrenceOptions.push('current');
$scope.occurrenceOptions.push('next');
$scope.model = {};
$scope.model.selectedOccurrence = 'current';
});
}());
Klicken Sie hier, um den in diesem Beispiel bereitgestellten Code auszuführen.
Verwenden Sie das ng-model mit der this-Funktion, um ng-model an eine Liste von Optionsfeldern in Angular zu binden
Der wesentliche Unterschied zwischen diesem Beispiel und dem vorherigen besteht darin, dass wir die Funktion this innerhalb des Controllers deklarieren und im Grunde die Funktion $scope ersetzen.
Wir ändern leicht den ng-repeat-Aspekt der index.html, der wie der unten stehende Code aussehen wird.
HTML Quelltext:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testController as vm">
<form>
<div ng-repeat="option in vm.occurrenceOptions">
<input type="radio" name="occurrence" ng-value="option" ng-model="vm.
selectedOccurrence" />
<label>{{ option }}</label>
</div>
</form>
<div>The selected value is : {{ vm.selectedOccurrence }}</div>
</body>
Dann deklarieren wir in der script.js die this-Funktion innerhalb des Controllers.
JavaScript-Code:
(function () {
var app = angular.module('testApp', []);
app.controller('testController', function () {
var vm = this;
vm.occurrenceOptions = [];
vm.occurrenceOptions.push('previous');
vm.occurrenceOptions.push('current');
vm.occurrenceOptions.push('next');
vm.selectedOccurrence = 'current';
});
})();
Klicken Sie hier, um den in diesem Beispiel verwendeten Code auszuführen.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn