Question

我有2个json 1用于face.json而另一个用于data.json我希望当我点击face时所以数据按照面部id从data.json过滤。 Face id也存在于data.json

中

it('handles Sql errors', function(done) {
  mockSql.setup.query.toRejectWith(new Error('Booom'));
  sut.getPatientNotificationNumbers(id).should.be.rejectedWith(/Booom/);
});

面对HTML

  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>

如何过滤？

Answer 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文件格式不同，您可能需要修改一下。

单击Angularjs数据过滤器

1 个答案: