如何使用2个JSON选项</select>在Angular.js中创建自定义<select>过滤器

Question

我有一个Q＆amp; A JSON Feed，内容如下：

"questions": [
    {
      "answer": "Ea et non sunt dolore nulla commodo esse laborum ipsum minim non.", 
      "id": 0, 
      "poster": "Chelsea Vang", 
      "question": "Ex ex elit cupidatat ullamco labore quis cupidatat. Reprehenderit occaecat mollit ex proident aliqua. Anim minim in labore pariatur adipisicing velit dolore elit nostrud proident reprehenderit in voluptate.", 
      "userAsked": false
    }, 
    {
      "answer": null, 
      "id": 1, 
      "poster": "Serena Randolph", 
      "question": "Esse occaecat anim cupidatat eu sit ad eiusmod. Et tempor deserunt ea ipsum velit irure elit qui. Ipsum qui labore laboris Lorem occaecat enim Lorem exercitation ut non duis. Sit cillum incididunt culpa ipsum.", 
      "userAsked": true
    }
  ]

我想创建一个自定义过滤器，允许您过滤（通过选择下拉列表）结果：所有问题，＆＃34; userAsked：true＆＃34; a.k.a我的问题和回答的问题（所以问题不是＆＃39; null＆＃39;在这种情况下，它会像！null？）。我知道如何为单个对象创建自定义过滤器，但是在这个实例中我无法弄清楚如何进行过滤，因为我试图通过多个选项进行过滤 - 我无法做 - 因为这个而重复选择选项..除非我的印象错误。

我的观点看起来像这样：

<select>  
 <option value="all">All Questions</option>  
 <option value="answered">Answered Questions</option>  
 <option value="mine">My Questions</option> 
</select> 

<ul class="list-unstyled">  
 <li ng-repeat="questions in qa.questions">   
  <strong>Question:</strong><br>
  {{questions.question}}<br>   
  <strong>Answer:</strong><br>   
  {{questions.answer}}    
  <hr>  
 </li> 
</ul>

控制器：

sessionControllers.controller('SessionDetailCtrl', ['$scope', '$routeParams', 'SessionFactory', 'CommentsFactory', 'QAFactory', function($scope, $routeParams, SessionFactory, CommentsFactory, QAFactory){
    $scope.session = SessionFactory.get({id: $routeParams.id});
    $scope.comments = CommentsFactory.get({eventId: $routeParams.id});
    $scope.qa = QAFactory.get({eventId: $routeParams.id});  
}]);

请帮忙！谢谢:)）

Answer 1

我能够通过实现@tymeJV建议的一些内容来解决这个问题。

查看

<select ng-model="filterItem.question" ng-options="item.questionType for item in filterOptions.questions">  
 <option value="All Questions">All Questions</option>  
 <option value="Answered Questions">Answered Questions</option>  
 <option value="My Questions">My Questions</option> 
</select> 

<ul>
 <li ng-repeat="questions in qa.questions | filter: myCustomFilter">
   <strong>Question:</strong>
   <br>{{questions.question}}<br>
   <strong>Answer:</strong><br> 
   {{questions.answer}}
 </li>
</ul>

<强>控制器

$scope.filterOptions = {
    questions: [
      {questionType: 'All Questions'},
      {questionType: 'Answered Questions'},
      {questionType: 'My Questions'}
    ]
  };

  //Mapped to the model to filter
  $scope.filterItem = {
    question: $scope.filterOptions.questions[0]
  };

  //Custom filter - filter based on the QuestionType selected
  $scope.myCustomFilter = function (data) {
    if ($scope.filterItem.question.questionType === "All Questions") {            
      return true;
    } else if ($scope.filterItem.question.questionType === 'Answered Questions') {
      return data.answer != null;
    } else if ($scope.filterItem.question.questionType === 'My Questions') {
      return data.userAsked;
    }
  };

Answer 2

嗯，将模型附加到您的选择过滤器并尝试这样的事情：

<select ng-model="questionFilter">  
   <option value="all">All Questions</option>  
   <option value="answered">Answered Questions</option>  
   <option value="mine">My Questions</option> 
</select> 

<li ng-repeat="questions in qa.questions | filter: myCustomFilter">

控制器：

$scope.myCustomFilter = function(item) {
    if (questionFilter == "all") {            
        return true;
    } else if (questionFilter == "answered") {
        return item.answer != null;
    } else if (questionFilter == "mine")
        return item.userAsked;
}