AngularJS filter already selected options

Question

I have 3 selects that all share the same options. As an option is selected in one of them, I want to filter it out of the other selects.

I took a stab at it here and did not have any luck. http://plnkr.co/edit/ERGTbQSjoX3IpGAomcUn?p=preview

<select name="ques1" ng-model="q1" required>
    <option value="">question</option>
    <option ng-repeat="question in questions | filter: { Id : '!' + q2 } | filter: { Id : '!' + q3 }" value="{{ question.Id }}">{{ question.Question }}</option>
</select>

Any advice? And thanks in advance.

Qi Tang · Accepted Answer · 2015-07-15 21:15:07Z

1

I finally make it work. According to the document. You can pass a function as argument to the filter. So I created a function that returns a function which will be passed to filter:

  $scope.negative = function(){
    var arr = Array.prototype.slice.call(arguments) 

     return function(value ,index, array){
       var scope = $scope;

       for(var i = 0 ; i<arr.length ;i++) {
          if(value.Id == scope[arr[i]]) return false;
       }

       return true;

     }
  }

Here is an example

answered Jul 15, 2015 at 21:15

Qi Tang

1,2657 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1264595 Over a year ago

While your approach did work @jme11, my scenario allows the user to start with any select they choose. That was a detail I did not think to include.

jme11 · Accepted Answer · 2015-07-15 20:56:33Z

0

Nearly got it:

var app = angular.module('demo', []);

app.controller('MainCtrl', function($scope) {
  $scope.q1 = '';
  $scope.q2 = '';
  $scope.q3 = '';
    
  $scope.questions = [
    { Id: 1, Question: '1 Question' },
    { Id: 2, Question: '2 Question' },
    { Id: 3, Question: '3 Question' },
    { Id: 4, Question: '4 Question' },
    { Id: 5, Question: '5 Question' }
  ]; 
});

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<div ng-app="demo" ng-controller="MainCtrl">
  <form name="form" novalidate>
    <div>
      <select name="ques1" ng-model="q1" required>
        <option value="">question</option>
        <option ng-repeat="question in questions" value="{{ question.Id }}">{{ question.Question }}</option>
      </select>
      <p class="error" ng-show="form.ques1.$error.required && form.ques1.$touched">question is required</p>
    </div>
    <div>
      <select name="ques2" ng-model="q2" required>
        <option value="">question</option>
        <option ng-repeat="question in questions | filter: ({Id: '!' + q1})" value="{{ question.Id }}">{{ question.Question }}</option>
      </select>
      <p class="error" ng-show="form.ques2.$error.required && form.ques2.$touched">question is required</p>
    </div>
    <div>
      <select name="ques3" ng-model="q3" required>
        <option value="">question</option>
        <option ng-repeat="question in questions | filter: ({ Id : '!' + q1 }) | filter: ({ Id : '!' + q2 })" value="{{ question.Id }}">{{ question.Question }}</option>
      </select>
      <p class="error" ng-show="form.ques3.$error.required && form.ques3.$touched">question is required</p>
    </div>
  </form>
</div>

answered Jul 15, 2015 at 20:56

jme11

17.9k2 gold badges40 silver badges49 bronze badges

2 Comments

Joy Over a year ago

Your first and second select do not filter out the selection of third select. Say, if your third select picks '3 Question', the first select should not contain the option '3 Question' any more.

jme11 Over a year ago

So your assumption is that someone will pick from the third select first? Hmmm interesting UX assumption. I'm not saying your wrong, I just assumed you were doing this for selecting security questions. I wouldn't expect that behavior based on that usage and I would lock in the question/answer pairs immediately in that case. Anyway, glad you got the solution you wanted. Best of luck.

Collectives™ on Stack Overflow

AngularJS filter already selected options

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related