javascript - 如何根据单击的复选框来过滤 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 时在 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/