如何在AngularJS中将JSON内的URL链接到同JSON中的文本？

嘿，这个需求我熟，在AngularJS里实现起来很简单！我给你一步步拆解怎么做：

1. 先把数据放到控制器里 #

首先你需要把这份JSON数据加载到AngularJS的控制器作用域中，比如这样写：

angular.module('myApp', [])
.controller('LinkController', function($scope) {
  // 你的JSON数据直接放在这里就行
  $scope.siteItems = [
    {
        "_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,
                "level30_desc": "google"
            }
        ]
    }
  ];
});

2. 在视图里渲染可点击的链接 #

接下来在HTML模板中，用ng-repeat遍历每一条数据，把hierarchies[0].level30_desc作为链接显示的文本，url作为跳转地址。这里有个小细节：一定要用ng-href而不是原生href，还要给URL补全http://前缀，不然浏览器会把它当成相对路径哦：

<div ng-app="myApp" ng-controller="LinkController">
  <div class="site-link" ng-repeat="item in siteItems">
    <!-- ng-href会等Angular解析完表达式再设置链接，避免加载时的无效跳转 -->
    <a ng-href="http://{{item.url}}" target="_blank">
      {{item.hierarchies[0].level30_desc || '无名称'}}
    </a>
  </div>
</div>

几个要注意的小细节 #

• 为什么用ng-href？ 因为如果用原生href，在Angular还没解析{{item.url}}的时候，浏览器会把链接指向{{item.url}}这个字符串，导致无效跳转，ng-href会等表达式解析完成后再设置正确的链接地址。
• 补全URL前缀：如果你的JSON里的url字段没有http://或https://，一定要加上，不然浏览器会把它当成当前页面的相对路径，跳转到错误的地址。
• 处理空值情况：如果有的数据里hierarchies是空数组，或者level30_desc不存在，可以用||设置默认文本，或者用ng-if控制链接是否显示，避免页面出现空白或错误。

这样就能实现你想要的效果啦——每个JSON对象里的描述文本都会变成指向对应URL的可点击链接。

内容的提问来源于stack exchange，提问作者HKI345