如何過濾基於哪個複選框被點擊的JSON？

Question

我在我的JavaScript中有一個簡單的JSON對象，並且我想在單擊按鈕時對其進行過濾。

我環顧四周，發現這一點。到目前爲止，我有這樣的：

$scope.myFunc = function(a) { 
     for(meal in $scope.mealTypes){ 
      var t = $scope.mealTypes[meal]; 
      if(t.on && a.type.indexOf(t.name) > -1){ 
       return true; 
      }    
     } 
    }; 

    $scope.mealTypes = {Breakfast: false, mainMeal:false}; 

這是我的HTML：

<input id="checkBox" type="checkbox" name="Breakfast" value="Breakfast" data-ng-model="mealTypes.breakfast"> 

<input id="checkBox" type="checkbox" name="mainmeal" value="Main Meal" data-ng-model="mealTypes.mainMeal"> 

然後，我的目標是遍歷數組並顯示檢查按下的按鈕（我希望顯示的名稱）：

<span ng-repeat="reciepe in reciepes | filter:search" id="filtertag" name="hello">{{ reciepe.type }} 
       <span id="filtertagRemove"> 
       <a href="google.com">remove</a> 
       </span> 
</span> 

JSON：

$scope.reciepes = 
    [ 
    { 
     "type": "Breakfast", 
     "title": "Chili con carne", 
     "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.", 
     "ratings": 4, 
     "ingredients": 
      [ 
      { 
       "vegetable": "40ml" 
      } 
      ], 
     "method": 
      [ 
      { 
       "1": "In a medium sized stock pot, heat the oil over medium heat. Saute onions, chile peppers andgarlic until soft." 
      } 
      ] 
    }, 

    { 
     "type": "Main Meal", 
     "title": "Main Meal", 
     "description": "A spicy and fragrant chili with ground beef, kidney beans, tomatoes, onions and garlic. Best served over rice with a dollop of sour cream and some cheese on top.", 
     "ratings": 4, 
     "ingredients": 
     [ 
      { 
       "vegetable": "40ml" 
      } 
     ], 
     "method": 
     [ 

      { 
       "1": "In a medium sized stock pot, heat the oil over medium heat. Saute onions, chile peppers andgarlic until soft." 
      } 
     ] 
    }] 

基本上，我的目標是在div上顯示覆選框的值，然後過濾數組。我應該怎麼做？

Answer 1

或者，您可以使用複選框將您的數據模型項標記爲選中或未選中，並根據此標記顯示它們。下面是我做了一個例子：

<label ng-repeat="meal in recipes">{{meal.type}} 
     <input id="checkBox" ng-model="meal.selected" type="checkbox"/> 
    </label> 


    <div ng-repeat='meal in recipes' ng-show="meal.selected"> 
     <h3>{{meal.type}}</h3> 
     <p>{{meal.description}}</p> 
    </div> 

http://jsfiddle.net/zgavf/5/

Answer 2

這個answer適合你的問題。基本上，它使用OR操作來過濾掉點擊複選框。您需要修改這個答案，以適應您的數據和目的，

核心代碼：

angular.module('myFilters', []). 
    filter('bygenre', function() { 
    return function(movies,genres) { 
     var out = []; 
     // Filter logic here, adding matches to the out var. 
     return out; 
    } 
    }); 

這裏是JS fiddle的一樣。

Answer 3

首先他們應該是單選按鈕而不是複選框。

<div ng-controller="HelloCntl" ng-init="type='Breakfast'"> 
Breakfast 
<input id="radio" type="radio" data-ng-model="type" ng-value="'Breakfast'"/> 
Main Meal 
<input id="radio" type="radio" data-ng-model="type" ng-value="'Main Meal'"/> 
<div ng-repeat="rec in reciepes| filter : type"> 
    <div> {{rec}}</div> 
</div> 

上述嘗試希望這會工作。