如何使用 AngularJS 将 json 中的 url 超链接到同一 JSON 中的文本答案

【问题标题】：How do i hyperlink a url in the json to the text inside the same JSON using AngularJS如何使用 AngularJS 将 json 中的 url 超链接到同一 JSON 中的文本
【发布时间】：2018-05-08 07:57:12
【问题描述】：

我的 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>

如果我想将显示的元素与 JSON 中可用的 URL 进行超链接，然后单击超链接应在新选项卡中打开...我将如何实现这一点

【问题讨论】：

标签： javascript angularjs json

【解决方案1】：

使用ng-href 指令将URL 分配给href 属性，并将target 指定为_blank 以在新选项卡中打开链接：

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

请记住从 a 标签中删除 ui-sref，因为它可能会用 UI 路由器的状态 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>

【讨论】：