Menu
I've written the following proof-of-concept of an Angular app that allows a person to vote for President of the US.
<!DOCTYPE html> <html ng-app="ElectionApp""> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> <script> var ElectionApp = angular.module("ElectionApp", []); var ElectionController = ElectionApp.controller("ElectionController", [function () { // Pretend that this data came from an outside data-source. this.candidates = { "14837ac3-5c45-4e07-8f12-5771f417ca4c": { name: "Alice", gender: "female" },"333eb217-c8d1-4b94-91a4-22a3770bbb22": { name: "Bob", gender: "male" } }; this.vote = function () { // TODO: Record the user's vote. }; }]); </script> </head> <body ng-controller="ElectionController as ctrl"> Who would you like to elect President? <br /> <select ng-model="ctrl.selection" ng-options="person as person.name for (id, person) in ctrl.candidates | filter{gender:'female'}"> </select> <input type="button" value="Vote!" ng-submit="ctrl.vote();" /> <h2>Candidate Profiles</h2> <div ng-repeat="candidate in ctrl.candidates"> {{candidate.name}}, {{candidate.gender}} </div> </body> </html> My voting app displays a list of the candidates names along with a profile for each candidate, which in this case, consists of the candidate's name and gender.
For the purpose of this question, please pretend that the roster of candidates to choose from is fetched from a remote data source, but will follow the same format as the example.
Suppose that shortly before the election is to be held, a constitutional amendment is passed mandating that the next US President must be female. Suppose that the data source cannot be updated in time for the election, and the boss said to me, "I've heard that with Angular, you can arbitrarily choose which items from the data source appear on the form using a filter. Make it happen!"
Following along with some examples I've seen on-line, I've written the above code, but it no longer displays any candidate. What did I do wrong?
How can I filter the options in a select list using an Angular filter?
329
In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.
The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values. The below illustrations describes the approach for the implementation.
AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
Definition and Usage. The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
It can filter a list of items by the user’s input. First, create an Angular project by running the command below in your terminal. Next, create a component for the select that will be filtered by ng-options. Finally, add a select to your component and pass it an expression that will be used for filtering.
The ng-options directive fills a <select> element with <options>. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.
Install & Configure ng-select 1 Step 1) Installation#N#Run the following command in terminal to install ng-select:#N#$ npm install -- save @ng - select / ng... 2 Step 2) Import in App Module#N#To use ng-select component, we need to import NgSelectModule & FormsModule in app.module.ts... 3 Step 3) Theming More ...
To create a select component add the ng-select component as shown below: There are some required and optional properties: items : Array or object of local or remote content to populate as select options. bindLabel : The property of an object which we want to show as a label in a select box.
You just forgot ":" after filter keyword.
<select ng-model="ctrl.selection" ng-options="person as person.name for person in ctrl.candidates | filter:{gender:'female'}"> </select> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
