Filteroptionen in einer Auswahlliste in Angular
ng-options ist eine Direktive, die es einfacher macht, eine HTML-Dropdown-Box zum Auswählen eines Elements aus einem Array zu erstellen, das in einem Modell gespeichert wird. Es erstellt dynamisch eine Liste von Optionselementen für das Auswahlelement, indem es den Auswertungsausdruck ng-options analysiert und ein Array oder Objekt zurückgibt.
Außerdem erzeugt die Direktive ng-options ein select-Element in Angular. Es kann eine Liste von Elementen nach der Eingabe des Benutzers filtern.
Schritte zum Filtern von Optionen in einer Auswahlliste in Angular
Die Schritte sind wie folgt:
-
Erstellen Sie zunächst ein Angular-Projekt, indem Sie den folgenden Befehl in Ihrem Terminal ausführen.
ng new angular_filter_select -
Erstellen Sie als nächstes eine Komponente für das
select, die nachng-optionsgefiltert wird.ng g c SelectFilter -
Schließlich fügen Sie Ihrer Komponente ein
selecthinzu und übergeben ihr einen Ausdruck, der zum Filtern verwendet wird. Der Ausdruck wird mit einem Attribut namensng-modelübergeben, das mit dem zu filternden Variablennamen übereinstimmen sollte.
Sehen wir uns anhand der obigen Schritte ein Beispiel für den Filter ng-option an.
TypeScript-Code:
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}];
});
HTML Quelltext:
<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>
Klicken Sie hier, um die Live-Demonstration des oben genannten Codes zu überprüfen.
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