AngularJS过滤器已经选择了选项

时间:2015-07-15 20:23:29

标签: angularjs angularjs-filter

我有3个选择,它们共享相同的选项。如果在其中一个选项中选择了一个选项,我想从其他选项中过滤掉它。

我在这里捅了一下,没有运气。 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>

有什么建议吗?并提前感谢。

2 个答案:

答案 0 :(得分:1)

我终于成功了。根据{{​​3}}。您可以将函数作为参数传递给过滤器。所以我创建了一个函数,它返回一个将传递给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;

     }
  }

这是document

答案 1 :(得分:0)

差不多了:

&#13;
&#13;
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' }
  ]; 
});
&#13;
<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>
&#13;
&#13;
&#13;