Событие клика по угловым элементам таблицы, направляющее его на второй URL, состоящий из идентификатора выбранного элемента

Question

Каждый элемент в угловой таблице должен запускаться, я имею в виду, что он кликабелен, т. Е. При щелчке по любому элементу таблицы он должен использовать свой идентификатор в качестве основы для нового поискового элемента и должен указывать на этот URL-адрес выбранного элемента. Ниже приведены данные json исходного URL. У него есть идентификатор, который я не отображаю в своей угловой таблице.

{
  "emp": [
    {
      "BNK": "Rock",
      "GP1": [
        "92333"
      ]
    },
    {
      "BNK": "Jack",
      "GP1": [
        "923434",
        "928998"
        ]
    }
  ],
"status": "ok"
}

1) Я хочу нажать "BNK": "Скала"(которая будет в угловом формате таблицы), затем она должна перейти на другой URL ( http://api.abc.com/1.1/GetGP2? GP1 = 92333& uid = api-key), который выполняет поиск выбранных элементов по идентификаторам данных, перечисленным ниже, и отображает таблицу описания идентификаторов, приведенную ниже.

    {
      "emp": [
        {
          "BNK": "Jemmy XL",
          "DF": "24",
          "GP2": [
            "9233301"
          ]
        },
        {
          "BNK": "Geremy",
          "DF": "GEL",
          "GP2": [
            "9233302"
          ]
        }

 var countryApp = angular.module('myApp', []);
myApp.controller('CountryCtrl', function($scope, $http) {
  $scope.enteredValue = "*";
  $scope.targetUrl = 'url';
  $scope.reset = function() {
    $scope.enteredValue = '';
  };
  $scope.doIt = function() {
    $scope.targetUrl = 'http://api.abc.com/GetGPs?**search=oxy**&uid=api-key';
    $http.get( $scope.targetUrl )
      .success(function(data) {
        console.log(data);
        $scope.dta = data.emp;
      });
  };
});

// Отображаем только "BNK", а не "GP"

      <tr ng-repeat="x in dta | filter:enteredValue">
                <td>{{x.BNK}}</td>

Answer 1

Передать объект x в функцию 'doIt' в контроллере:

<tr ng-repeat="x in dta | filter:enteredValue">
    <td data-ng-click=doIt(x)>{{x.BNK}}</td>


$scope.doIt = function(x) {

  // because 'GPx' propery name is change between objects 
  // then we need to find the 'GPx' property name inside x: GP1 ?, GP2 ?, ... GPn ?
  var gpRegex = /^GP\d+/;
  var gpPropertyName = null;
  for(var propertyName in x) {
    if (gpRegex.test(propertyName)){
        gpPropertyName = propertyName;
    }
  }

  // if 'GPx' propery exists in x obj then insert its id's to target url
  if (gpPropertyName && x[gpPropertyName]){
    var gp = x[gpPropertyName];
    var gpIds = gp.join(',');
    $scope.targetUrl = 'http://api.abc.com/GetGPs?' + gpPropertyName + '=' + gpIds + &uid=api-key';
    $http.get( $scope.targetUrl )
      .success(function(data) {
        console.log(data);
        $scope.dta = data.emp;
      });
    }
};