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