0

请注意：这是我的第一个 Angular 应用程序，所以如果我提出错误或愚蠢的问题，我深表歉意。

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

以下是数据集中一个变量或“菜”的示例：

{
    "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 仅显示嵌套类型数组中具有甜点 / 等的变量或“菜肴”的地方）

<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 Controller 用于部分：

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 文件，但我想知道如何正确地做到这一点。

4

3 回答 3

0

演示：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>
于 2016-01-05T21:22:02.527 回答
0

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

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

于 2016-01-05T21:23:58.450 回答
0 
<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;
}
于 2016-01-16T20:34:01.107 回答