CODEWITHSUNDEEP
javascriptangularjs
Woot4Moo
Woot4Moo

Reputation: 24336

angularjs filter remaining dropdown choices after a selection

If I were creating a system that allowed for multiple field searches and wanted to do this via drop down (similar to Redmine), how could I implement that? With the specific part being, once I select the field "foo" and I click a button that says "Add another field" I would not be able to select "foo" again?

initial fields: {"foo","bar","baz"}  
select fields.foo  
add another field
remaining fields = {"bar","baz"}

Let me know if clarification is required.

I found a drop down example here.

CLARIFICATION

Let "foo" be an integer Let "bar" be a date Let "baz" be a string

If the user adds the field "bar" I would provide a calendar picker widget. If the user selects "foo" I ensure the number is a valid integer.
If the user selects "baz" I check to make sure it is a valid string.

Therefore, each selection will exhibit certain behavior based on the field selection, so the user must select each field individually via the "Add another field" button.

Upvotes: 0

Views: 487

Answers (1)

tennisgent
tennisgent

Reputation: 14201

I've done this very thing many times. Here's a snippet from my own code. The code was used to allow commercial contractors to select "affiliations" for their company.

In my HTML view:

<select class="input-full" ng-model="currAff" ng-options="aff for aff in availableAffs | filter:notAlreadyAdded"></select>

Note the filter:notAlreadyAdded portion above.

In my controller:

$scope.notAlreadyAdded = function(aff){
    // search through all the affiliations that were previously added
    // if the given "aff" is in the previously-added list, return false
    // else, return true
};

Using the filter:notAlreadyAdded filter for the ng-options on a select will loop through each item in the array of options and will pass that item to the given function. You can then use that item to do whatever testing you want and then you simply return a boolean that tells angular if it should include that item in the list of possible options in the future.

I hope that answers your question.

Upvotes: 3

Related Questions