Как я могу гиперссылку URL в JSON на текст внутри того же JSON с помощью AngularJS

Question

У меня есть структура JSON, как показано ниже:

[
  {
    "_id": "0",
    "_rev": "1",
    "url": "fb.com",
    "ownership": {
      "line": "social"
    },
    "id": 13,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-9X",
        "level30_desc": "facebook",
        "level30_id": "6941-0P",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-0P"
      }
    ]
  },
  {
    "_id": "02ad9973a97f82db1c",
    "_rev": "1-8788cdde1205ca608a3",
    "url": "www.google.com",
    "ownership": {
      "line": "social"
    },
    "id": 159,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-9L",
        "level30_desc": "google",
        "level30_id": "6941-9L",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-9L"
      }
    ]
  },
  {
    "_id": "01c555f2333a97f82e837",
    "_rev": "1-0101ae7cc842f43c9a40",
    "url": "www.twitter.com",
    "ownership": {
      "line": "social"
    },
    "id": 14,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-8M",
        "level30_desc": "twitter",
        "level30_id": "6941-8M",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-8M"
      }
    ]
  }
]

В контроллере у меня есть этот JSON, чтобы быть в vm.searchData, там на дисплее HTML я отображаю данные как

<div ng-repeat="item in vm.searchData track by $index">
    <div id="{{item.url}}">
        <a class="search-results" href="" ui-sref="." ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a>
    </div>
</div>

Если я хочу сделать гиперссылку на отображаемый элемент с URL-адресом, доступным в JSON, и щелчок по гиперссылке должен открыться в новой вкладке ... Как бы мне этого добиться

Answer 1

Присвойте URL атрибуту href с помощью директивы ng-href и укажите target как _blank, чтобы открыть ссылку в новой вкладке:

<a class="search-results" ng-href="//{{item.url}}" target="_blank" ng-repeat ...

Просто не забудьте удалить ui-sref из тегов a, так как это может перезаписать URL-адреса на URL-адреса состояния маршрутизатора пользовательского интерфейса. Кроме того, поскольку в ваших данных URL-адреса не имеют протокола, перед ними будет полезно указать //, чтобы сделать их абсолютными.

Рабочая демоверсия:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.searchData = [{
        "_id": "0",
        "_rev": "1",
        "url": "fb.com",
        "ownership": {
          "line": "social"
        },
        "id": 13,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-9X",
          "level30_desc": "facebook",
          "level30_id": "6941-0P",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-0P"
        }]
      },
      {
        "_id": "02ad9973a97f82db1c",
        "_rev": "1-8788cdde1205ca608a3",
        "url": "www.google.com",
        "ownership": {
          "line": "social"
        },
        "id": 159,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-9L",
          "level30_desc": "google",
          "level30_id": "6941-9L",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-9L"
        }]
      },
      {
        "_id": "01c555f2333a97f82e837",
        "_rev": "1-0101ae7cc842f43c9a40",
        "url": "www.twitter.com",
        "ownership": {
          "line": "social"
        },
        "id": 14,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-8M",
          "level30_desc": "twitter",
          "level30_id": "6941-8M",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-8M"
        }]
      }
    ];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in searchData track by $index">
    <div id="{{item.url}}">
      <a class="search-results" ng-href="//{{item.url}}" ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a></div>
  </div>
</div>