Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/15.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何创建定制<;选择>;使用2个JSON选项在Angular.js中过滤_Javascript_Json_Angularjs - Fatal编程技术网

Javascript 如何创建定制<;选择>;使用2个JSON选项在Angular.js中过滤

Javascript 如何创建定制<;选择>;使用2个JSON选项在Angular.js中过滤,javascript,json,angularjs,Javascript,Json,Angularjs,我有一个带有以下内容的Q&a JSON提要: "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.

我有一个带有以下内容的Q&a JSON提要:

"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
    }
  ]
我想创建一个自定义过滤器,允许您通过以下方式过滤(通过选择下拉列表)结果:All Questions,“userAsked:true”a.k.a My Questions和Answeed Questions(在本例中不是“null”的问题类似于!null?)。我知道如何为单个对象创建自定义过滤器,但在本例中不知道如何执行此操作,因为我尝试按多个选项进行过滤,因此无法对选择选项执行ng重复。。除非我有错误的印象

我的观点是这样的:

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

请帮忙!谢谢:)

嗯,将一个模型附加到您选择的过滤器,然后尝试以下操作:

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

我通过实现@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>

感谢您的回复@tymeJV!这意味着在我将上述内容添加到现有控制器时,没有定义questionFilter。我将把控制器的详细信息添加到我的帖子中。非常感谢。
$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;
    }
  };