Opciones de filtro en una lista de selección en Angular
ng-options es una directiva que facilita la creación de un cuadro desplegable HTML para seleccionar un elemento de una matriz que se guardará en un modelo. Construye dinámicamente una lista de elementos de opción para el elemento de selección analizando la expresión de evaluación ng-options y devolviendo una matriz u objeto.
Además, la directiva ng-options crea un elemento de selección en Angular. Puede filtrar una lista de elementos por la entrada del usuario.
Pasos para filtrar opciones en una lista de selección en Angular
Los pasos son los siguientes:
-
Primero, cree un proyecto Angular ejecutando el siguiente comando en su terminal.
ng new angular_filter_select -
A continuación, cree un componente para la
selectque se filtrará porng-options.ng g c SelectFilter -
Finalmente, agregue un
selecta su componente y pásele una expresión que se usará para filtrar. La expresión se pasa usando un atributo llamadong-modelque debe coincidir con el nombre de la variable que se está filtrando.
Usando los pasos anteriores, veamos un ejemplo del filtro ng-option.
Código mecanografiado:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.CountryName =[{"countryName":"England","isDisabled":false},
{"countryName":"Netherlands","isDisabled":false},
{"countryName":"USA","isDisabled":false},
{"countryName":"China","isDisabled":false},
{"countryName":"India","isDisabled":false}];
});
Código HTML:
<html ng-app="plunker">
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<H2>
Example of Using Filter with ng-options
</H2>
<select
ng-options="country.countryName as country.countryName disable when country.isDisabled for country in CountryName |filter:{isDisabled:false}"
ng-model="myCountry">
<option value="">Select a Country</option>
</select>
</body>
</html>
Haga clic aquí para ver la demostración en vivo del código mencionado anteriormente.
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