点击 Angularjs 数据过滤器答案

【问题标题】：Angularjs data filter on click点击 Angularjs 数据过滤器
【发布时间】：2015-06-11 17:20:04
【问题描述】：

我有 2 个 json 1 用于 face.json 和另一个用于 data.json，当我单击人脸时，我想要按面 ID 从 data.json 中过滤数据。人脸id也存在于data.json中

  var countryApp = angular.module('countryApp', []);
  countryApp.controller('CountryCtrl', function ($scope, $http){
    $http.get('mainHotelData.json').success(function(data) {
      $scope.mainHotelData = data;
    });

     $http.get('face.json').success(function(data) {
      $scope.faces = data;
    });
  });

人脸 HTML

  <div class="faces">
    <div ng-repeat = "face in faces">
        <a href="#" id="{{face.id}}" ng-click="hFcId.id=face.id"><img src="Ratings/faces/{{face.fcImg}}"></a>
    </div>
  </div>

数据 HTML

<table>
  <tr ng-repeat="data in mainHotelData | filter:query">
    <td>{{data.hName}}</td>
    <td>{{data.hLocation}}</td>
  </tr>
</table>

如何过滤？

【问题讨论】：

您正在使用query过滤数据。所以很明显，点击一张脸一定会改变query的内容。不是hFcId。它必须更改的内容取决于您要如何过滤，以及mainHotelData中对象的结构@
我也用过查询但还是不行

标签： json angularjs filter

【解决方案1】：

包含 angularJS 代码的 HTML 页面

<!DOCTYPE html>
<html ng-app="countryApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="CountryCtrl">
    <div class="faces">
        <div ng-repeat="face in faces">
            <a href="" id="{{face.id}}" ng-click="search(face.id);"><img src="Ratings/faces/{{face.fcImg}}"></a>
        </div>
    </div>
    <table>
        <tr ng-repeat="data in mainHotelData | filter:query">
            <td>{{data.hName}}</td>
            <td>{{data.hLocation}}</td>
        </tr>
    </table>
    <script>
        var countryApp = angular.module('countryApp', []);
        countryApp.controller('CountryCtrl', function ($scope, $http) {
            $http.get('mainHotelData.json').success(function (data) {
                $scope.mainHotelData = data.records;
            });
            $http.get('face.json').success(function (data) {
                $scope.faces = data.records;
            });
            $scope.search = function (id) {
                $scope.query = id;
            }
        });
    </script>
</body>

</html>

face.json

{
  "records": [
    { "id": 1, "fcImg": "faceImg1.png" },
    { "id": 2, "fcImg": "faceImg3.png" },
    { "id": 3, "fcImg": "faceImg2.png" }
  ]
}

mainHotelData.json

{
  "records": [
    { "hName": "Name1", "hLocation": "Location1", "hFcId": 1 },
    { "hName": "Name2", "hLocation": "Location2", "hFcId": 2 },
    { "hName": "Name3", "hLocation": "Location3", "hFcId": 3 },
    { "hName": "Name4", "hLocation": "Location4", "hFcId": 2 },
    { "hName": "Name5", "hLocation": "Location5", "hFcId": 1 },
    { "hName": "Name6", "hLocation": "Location6", "hFcId": 3 },
    { "hName": "Name7", "hLocation": "Location7", "hFcId": 1 },
    { "hName": "Name8", "hLocation": "Location8", "hFcId": 2 }
  ]
}

如果您的 json 文件格式不同，您可能需要稍作修改。

【讨论】：