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


杰森:

$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时在其上显示复选框值并过滤数组。我应该怎么做?

最佳答案

或者,您可以使用复选框将您的数据模型项标记为选中或未选中,并基于此标记显示它们。这是我做的一个例子:

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

关于javascript - 如何根据单击的复选框过滤JSON?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24829694/

10-12 12:17
查看更多