How do you filter JSON based on which checkbox is clicked?

Question

I have a simple JSON object in my javascript, and I want to filter it when a button is clicked.

I looked around and found this. So far I have this:

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

This is my 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">

Then I aim to iterate the array and display the checked button pressed (I wish to display the names):

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

Basically I aim to display the checkbox value on a div when it's pressed and filter the array. How should I do this?

I wonder where is button? n whats your problem? – micronyks Jul 18 '14 at 16:57 — micronyks, Jul 18 '14 at 16:57

score 1 · Answer 1 · edited May 23 '17 at 10:26

This answer suits your question. Basically, it uses OR operation to filter out on clicking checkboxes. You need to modify this answer to adapt your data and purpose,

Core code is:

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

Here is the JS fiddle for the same.

score 1 · Answer 2 · answered Jul 18 '14 at 16:54

First thing they should be radio button instead of checkboxes.

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

Try above hope this will work.

score 1 · Accepted Answer · answered Jul 18 '14 at 17:16

Alternatively, you could use the checkboxes to flag your data model items as selected or not selected, and display them based on this flag. Here's an example I made:

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

How do you filter JSON based on which checkbox is clicked?

3 Answers3