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

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

首先他们应该是单选按钮而不是复选框。

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

尝试以上希望这会奏效。

Answer 3

或者，您可以使用复选框将数据模型项标记为已选择或未选中，并根据此标志显示它们。这是我做的一个例子：

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

如何根据单击的复选框过滤JSON？

3 个答案: