Question

我正在针对字符串数组过滤JSON数据。 $scope.Data的示例如下：

{
    "exerciseDescription": "Lean forward onto a chair and allow the arm to hang down, gently swing the arm from side to side",
    "exerciseID": "324",
    "exerciseName": "Shoulder Pendular Exercise (Adduction/Abduction)",
    "images": [
        1008,
        1009,
        1010
    ],

    "tags": [
        "Body Part",
        "Arm",
        "Upper body",
        "Equipment",
        "Chair"
        "Soft Tissue"
    ]
},

这些数据总共有4500套，我想通过点击复选框来过滤它。在单击复选框时，我将复选框的值（将为tag）推送到数组。

然后我想过滤掉嵌套标记值。

我的观看功能在这里：

$scope.$watchCollection('ActiveFilters', function(newValue) {
      if ($scope.ActiveFilters.length > 0) {
        $scope.FilteredData = $scope.Data;
        for (var i = 0; i < $scope.ActiveFilters.length; i++) {
          $scope.FilteredData = $filter('filter')($scope.FilteredData, $scope.ActiveFilters[i]);
          console.log($scope.FilteredData);
          // console.log($scope.ActiveFilters);
        }
      }
      else {
        $scope.FilteredData = [];
      }
    });

因此，如果$scope.FilteredData contains any 'ActiveFilters' in its nested tag`数组，则它将显示在范围内。

简而言之 - 我怎样才能过滤嵌套标记数组。

Answer 1

使用javascript中的对象值进行过滤：

var items = [{
    "exerciseDescription": "Lean forward onto a chair and allow the arm to hang down, gently swing the arm from side to side",
    "exerciseID": "324",
    "exerciseName": "Shoulder Pendular Exercise (Adduction/Abduction)",
    "images": [
        1008,
        1009,
        1010
    ],

    "tags": [
        "Body Part",
        "Arm",
        "Upper body",
        "Equipment",
        "Chair",
        "Soft Tissue"
    ]
}];

var filter = function (obj) {
  if (obj['tags'].indexOf("Soft Tissue") != -1) { // <--- filter by value in tags array
    return true;
  }
  return false;
}

var filtered = items.filter(filter);

我认为你会得到这个想法并使其适应角度使用。

Answer 2

除非您尝试过滤AngularJS标记/模板，否则我认为没有理由使用$filter。{p>我认为没有理由使用var filterTags = ['foo', 'bar', 'baz']; var incomingData = [ // simplified example {id: 'banana', tags: ['foo', 'qux']}, {id: 'potato', tags: ['qux', 'baz', 'foo', 'bar']}, {id: 'carrot', tags: ['qux', 'quux']}, {id: 'cabbage', tags: ['foo', 'baz', 'bar']} ]; var dataMatchingAllTags = incomingData.filter(function (obj) { return filterTags.every(function (tag) { return obj.tags.indexOf(tag) !== -1; }); }); // [{id: 'potato', …}, {id: 'cabbage', …}] var dataMatchingAnyTag = incomingData.filter(function (obj) { return filterTags.some(function (tag) { return obj.tags.indexOf(tag) !== -1; }); }); // [{id: 'banana', …}, {id: 'potato', …}, {id: 'cabbage', …}] var dataMatchingTagsExactly = incomingData.filter(function (obj) { return ( obj.tags.length === filterTags.length && filterTags.every(function (tag) { return obj.tags.indexOf(tag) !== -1; }) ); }); // [{id: 'cabbage'}]。如果你想在自定义指令中支持AngularJS过滤器表达式，那么它在JS中才真正有用。

以下是在vanilla JavaScript中执行标记过滤的更完整示例：

$scope.ActiveFilters

在您的情况下，filterTags为$scope.Data，incomingData为$scope.FilteredData，dataMatchingAllTags为dataMatchingAnyTag，{{1}或dataMatchingTagsExactly，具体取决于您希望过滤器的工作方式。

请注意，此示例假定ES5，但考虑到AngularJS也这样做，我不认为这将是一个问题。

$仅按嵌套对象值过滤

2 个答案: