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

Question

我有一个问答 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
    }
  ]

我想创建一个自定义过滤器，允许您通过以下方式过滤(通过选择下拉列表)结果:所有问题、“userAsked:true”又名“我的问题”和已回答的问题(因此在此问题中不为“空”的问题)如果是这样的话，就会像!null？)。我知道如何为单个对象创建自定义过滤器，但无法弄清楚在这种情况下如何执行此操作，因为我试图按多个选项进行过滤 - 我无法为选择执行 ng-repeat因此的选择..除非我有错误的印象。

我的观点看起来像这样:

<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>

Controller :

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>

Controller

$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;
    }
  };