How to create a custom <select> filter in Angular.js using 2 JSON options

Question

I have a Q&A JSON feed with the following:

"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
    }
  ]

I want to create a custom filter that allows you to filter (by select dropdown) the results by: All Questions, "userAsked: true" a.k.a My Questions, and Answered Questions (so questions that are not 'null' in this case it would be something like !null?). I know how to create a custom filter for a single object, but can't figure out how to do it in this instance since I am trying to filter by more then one option-I can't do an ng-repeat for the select options because of this.. unless I am under the wrong impression.

My view looks something like this:

<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});  
}]);

Please help! Thank you :)

satully89 · Accepted Answer · 2014-04-23 13:41:57Z

I was able to figure it out by implementing some of what @tymeJV suggested.

View

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

tymeJV · Accepted Answer · 2014-04-22 20:00:54Z

0

Hmm, attach a model to your select filter and try something like this:

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

And the controller:

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

answered Apr 22, 2014 at 20:00

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

satully89 Over a year ago

Thank you for your response @tymeJV! It is saying questionFilter is not defined when I add the above to my existing controller. I will add the controller details to my post. Thank you!

Collectives™ on Stack Overflow

How to create a custom <select> filter in Angular.js using 2 JSON options

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related