Question

目前我的JSON文件如下所示：

[
  {
    "name":"Bánh bao nướng phô mai thịt",
    "image":"banhbaonuongphomaithit",
    "howtocook":"<h1>abc<\/h1>",
    "video":"sY6bswxfVGM",
    "category": "bakery"
  },
  {
    "name":"Cháo móng giò hạt sen",
    "image":"chaomonggiohatsen",
    "howtocook":"Sample",
    "video":"24vqCAXlQ0w",
    "category": "appetizer"
  },
  {
    "name":"Bánh mì chà bông nhân trứng muối",
    "image":"banhmichabongnhantrungmuoi",
    "howtocook":"Sample",
    "video":"HhMj6jDIQrY",
    "category": "bakery"
  },
  {
    "name":"Cà chua muối kiểu kim chi",
    "image":"cachuamuoikieukimchi",
    "howtocook":"Sample",
    "video":"aOYlyEiV3HQ",
    "category": "appetizer"
  }
 ]

这是我的JS

var pageControllers = angular.module('pageControllers', [])
.config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects or libraries.
  $sceProvider.enabled(false);
});
;

pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/foods.json').success(function(data) {
    $scope.games = data;
  });
}]);

和HTML

<div class="row"> <!--First row-->
  <div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat = "item in games | filter: query">
   <a href="#/details/{{games.indexOf(item)}}" class="thumbnail" data-toggle="tooltip" data-placement="bottom" title="{{item.name}}"><img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}"></a>
<div class="caption">
<h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
<form name="uploadItem" ng-submit="addFavorite()" novalidate ng-controller = "UploadController" ng-show = "currentUser" ng-controller = "RegistrationController">
<div class="form-group">
<input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'"  value="{{item.name}}" >
</div>
<button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
</form>
</div>
</div><!--End of first row-->
</div>

我希望按类别显示每个记录过滤器，例如当我过滤开胃菜或在类别页面中进行过滤时，应显示所有具有开胃菜类别的记录。我虽然重新组织了JSON文件，但仍然不知道如何过滤它。

Answer 1

您应该使用 .then 并访问 data 属性

pageControllers.controller('HomeController', ['$scope', '$http', function($scope, $http) {
  $http.get('foods.json').then(function(data) {
    $scope.games = data.data;
  });
}]);

<强> DEMO

Answer 2

添加搜索框以按属性说明＆＃39;类别＆＃39; as：

<input type="text" ng-model="query.category" placeholder="Search by category"/>

在此，ng-model="query.category"会过滤类别类型

上的ng-repeat="item in games | filter: query "

样本

＆＃13;

angular.module('pageControllers', []).controller('HomeController', ['$scope', function($scope) {
  $scope.games = [{
      "name": "Bánh bao nướng phô mai thịt",
      "image": "banhbaonuongphomaithit",
      "howtocook": "<h1>abc<\/h1>",
      "video": "sY6bswxfVGM",
      "category": "bakery"
    },
    {
      "name": "Cháo móng giò hạt sen",
      "image": "chaomonggiohatsen",
      "howtocook": "Sample",
      "video": "24vqCAXlQ0w",
      "category": "appetizer"
    },
    {
      "name": "Bánh mì chà bông nhân trứng muối",
      "image": "banhmichabongnhantrungmuoi",
      "howtocook": "Sample",
      "video": "HhMj6jDIQrY",
      "category": "bakery"
    },
    {
      "name": "Cà chua muối kiểu kim chi",
      "image": "cachuamuoikieukimchi",
      "howtocook": "Sample",
      "video": "aOYlyEiV3HQ",
      "category": "appetizer"
    }
  ]
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div class="row" ng-app="pageControllers" ng-controller="HomeController">
  <!--First row-->
  
  <input type="text" ng-model="query.category" placeholder="Search by category"/>
  <br> <br> <br>
  <div class="col-xs-12 col-sm-4 col-lg-3" ng-repeat="item in games | filter: query ">
    <a href="#/details/{{games.indexOf(item)}}" class="thumbnail" data-toggle="tooltip" data-placement="bottom" title="{{item.name}}"><img ng-src="img/foods/{{item.image}}.png" alt="{{item.name}}"></a>
    <div class="caption">
      <h5 class="text-center" ng-model="foodname">{{item.name}}</h5>
      <form name="uploadItem" ng-submit="addFavorite()" novalidate ng-show="currentUser">
        <div class="form-group">
          <input type="text" name="name" class="form-control" ng-model="foodname" ng-init="foodname='{{item.name}}'" value="{{item.name}}">
        </div>
        <button type="submit" class="btn btn-block" style="background-color: #FF4500">Add to favorite</button><br>
      </form>
    </div>
  </div>
  <!--End of first row-->
</div>

＆＃13;

Answer 3

感谢您的好意。

我找到了一种按类别过滤JSON文件中数据的方法，我只需要在ng-repeat

中加入 filter：{category：'bakery'}

ng-repeat = "item in foods | filter: query | filter: {category:'bakery'}"

使用angularjs按特定值过滤JSON文件中的数据

3 个答案: