文章/答案/技术大牛

发布

问单击Angularjs数据筛选器
EN

Stack Overflow用户

提问于 2015-06-11 17:20:04

回答 1查看 988关注 0票数 0

我有2json1用于face.json，另一个用于data.json，当我单击face时，我希望通过face 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>

如何过滤？

json

angularjs

filter

回答 1

Stack Overflow用户

发布于 2015-06-14 10:44:03

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30787380

复制

相似问题

问单击Angularjs数据筛选器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击Angularjs数据筛选器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击Angularjs数据筛选器
EN