AngularJS：如何根据变量的嵌套数组仅显示 json 文件中具有特定值的项目

Question

请注意：这是我的第一个 angular 申请，如果我问了一个错误或愚蠢的问题，我深表歉意。

我正在使用 ng-repeat 列出 json 文件中存在的数据项。我希望能够仅列出 SPA 的不同部分所需的数据 (ng-show)。该网站是家庭食谱的个人网站。单击按钮后，我希望能够仅列出甜点食品等。我已经在进行此工作，但我正在使用多个 json 文件和重复数据来完成此操作（脏数据？）。目标是整个站点只有一个 json 文件。

这是数据集中一个变量或"dish"的示例：

{
    "name": "Pecan Pie",
    "shortname": "pecan-pie",
    "type": [
        "dessert",
        "holidaydish"
    ],
    "contributor": "Mark",
    "totalt": "1h 5m",
    "ingredients": "1 cup light brown sugar",
    "steps": "Preheat oven to 400 degrees.",
},

我正在尝试根据值的嵌套数组显示数据："type"

HTML 在局部调用 json 文件中的每个变量：

（这是我未能使用 ng-show 仅显示嵌套类型数组中具有甜点/等的变量或 "dishes"）

<li class="dishlistli" ng-repeat="item in dish | filter: query | orderBy: dishOrder:direction">
  <a href="#/allcards/{{dish.indexOf(item)}}">
    <div>
      <h2>{{item.name}}</h2></div>
  </a>
</li>

部分 Ex 控制器：

dishControllers.controller('AllcardsController', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/all.json').success(function(data) {
    $scope.IsVisible = false;
    $scope.ShowHide = function() {
      $scope.IsVisible = $scope.IsVisible ? false : true;
    }

    $scope.dish = data;
    $scope.whichItem = $routeParams.itemId;

    if ($routeParams.itemId > 0) {
      $scope.prevItem = Number($routeParams.itemId) - 1;
    } else {
      $scope.prevItem = $scope.dish.length - 1;
    }

    if ($routeParams.itemId < $scope.dish.length - 1) {
      $scope.nextItem = Number($routeParams.itemId) + 1;
    } else {
      $scope.nextItem = 0;
    }
  });
}]);

非常感谢任何时间和帮助。如果我遗漏了任何必要的信息，请告诉我。

应用程序的工作版本（使用多个 json 文件）位于：http://clarkecookbook.com/#/all

我总是可以继续使用多个 json 文件，但我想知道如何正确执行此操作。

Answer 1

演示者：http://plnkr.co/edit/qLwfnkOdxjoJ5pjPcZYQ?p=preview

在视图中试试这个：

<input ng-model="query"/>
<ul>
  <li ng-repeat="e in list | filter: {type: query}">
    {{e.name}}  (type: {{e.type}})
  </li>
</ul>

Answer 2

如果您想制作更复杂的过滤器，那么您可以创建一个函数，将 ng-repeat 的对象传递给该函数。根据查询对象检查函数内对象的类型值，然后 return 如果找到则为真，否则为假。

您可以使用一个 json 文件。您只需更改数据模型以反映 JSON 文件的结构。此外，在 angular 中使用 ng-href 而不是 href 被认为是最佳做法，因为您无法保证 angular 会在单击之前替换括号内的文本。

Answer 3

<li class="dishlistli" ng-repeat="item in dish | filter: query | orderBy: dishOrder:direction" ng-if="showDelete(item.type)">

使用上面的 ng-if 指令以及向控制器添加以下函数使我能够仅显示基于类型变量的所需数据项。

$scope.showDelete = function(itemType){
    var testType = "drink";

    if(testType.indexOf(itemType) > -1){ //test the Type
        return true;
    }
    return false;
}

AngularJS：如何根据变量的嵌套数组仅显示 json 文件中具有特定值的项目

AngularJS: How to only show items in json file that have a certain value(s) based on a nested array of a variable

json

angularjs

single-page-application

angularjs-ng-repeat

angularjs-ng-show