Vincular Ng-Model a una lista de botones de opción en Angular
Cuando un usuario de una página web selecciona un elemento de varias opciones, volver a mostrar el elemento seleccionado en la lista de opciones ayuda al usuario a comprender su elección. Esto permite al usuario pasar fácilmente a lo siguiente que debe hacer en la página web.
Las características Angular como esta son ideales cuando se desarrolla un sitio web de comercio electrónico. Para que el sitio web muestre el elemento seleccionado, veremos el uso del ng-model para realizar esta función.
El ng-model se puede vincular a una lista de botones de radio en una página web, y aprenderemos dos métodos diferentes para realizar estas funciones.
Use ng-model con la función $scope para vincular ng-model a una lista de botones de opción en Angular
Este sencillo ejemplo definirá el ng-model en el index.html. El código HTML se verá así.
Código HTML:
<!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>
Luego, en el archivo script.js, ejecutamos la función $scope dentro del controlador. El $scope ayuda a vincular el controlador al HTML donde hemos realizado las codificaciones para el ng-model.
Código JavaScript:
(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';
});
}());
Haga clic aquí para ejecutar el código proporcionado en este ejemplo.
Use el ng-model con la función this para vincular ng-model a una lista de botones de opción en Angular
La diferencia significativa entre este ejemplo y el anterior es que declaramos la función this dentro del controlador, básicamente reemplazando la función $scope.
Cambiamos ligeramente el aspecto ng-repeat del index.html, que se verá como el código a continuación.
Código HTML:
<!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>
Luego, en el script.js, declaramos la función this dentro del controlador.
Código JavaScript:
(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';
});
})();
Haga clic aquí para ejecutar el código utilizado en este ejemplo.
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