Фильтр данных Angularjs по клику

У меня есть 2 json 1 для face.json и еще один для data.json. Я хочу, когда я нажимаю на лицо, чтобы фильтр данных из data.json по идентификатору лица. Лицо идентификатор существуют также в data.jsonФильтр данных Angularjs по клику

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; 
    }); 
    });

Face 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 Data

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

Как фильтровать?

источник

2015-06-11 user3265073

Вы используете 'query' для фильтрации данных. Очевидно, что щелчок по лицу должен изменить содержимое 'query'. Не из 'hFcId'. Что он должен изменить, зависит от того, как вы хотите фильтровать, и о структуре объектов в 'mainHotelData' –

Я также использовал запрос, но все еще не работал – user3265073

HTML страницы, включая angularJS код

<!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-файла отличается.

источник

2015-06-14 10:44:03 hpatel

Фильтр данных Angularjs по клику

ответ

Смежные вопросы