如何为 angularjs 数组中的每个元素创建唯一的超链接

Question

所以我有一个随机名称数组，我希望数组中的每个名称都有自己的 hyperlink。当显示时，它基本上应该是一个名称列表，每个 link 到不同的页面，我如何给数组中的每个名称一个不同的 hyperlink？我附上了 html 和 js.

的片段

$scope.artists=[
{
    name: "Noelle",
    rank: "Gold",
    worth: 752000,
},
{
    name: "John",
    rank: "Silver",
    worth: 700000,
},
{
    name: "Shem",
    rank: "Green",
    worth: 5687952,
},

<ul>
    <li ng-repeat="artist in artists | orderBy: order | filter: search">
        <h3>{{artist.name}} - {{artist.worth | currency:'£'}}</h3>
        <div class="remove" ng-click="removeArtist(artist)">x</div>
        <span class="rank" style="background:{{artist.rank}}">{{artist.rank}}</span>
   </li>
</ul>

Answer 1

您可以将 href 作为艺术家对象的一部分包含在内 - 并且有一个标准 URL，仅艺术家的名字不同。

在下文中，我将艺术家插入到 a 的 href 中。请注意，我将其编码为带有艺术家全名的 link 属性以防有两位艺术家具有相同的名字。

请注意，将鼠标悬停在 link 文本上会显示 link href - 如果您单击它 - 则不会显示任何内容，因为没有可导航到的相应页面。

var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {

    $scope.artists=[
    {
        name: "Noelle",
        rank: "Gold",
        worth: 752000,
        link: "noelle-smith"
    },
    {
        name: "John",
        rank: "Silver",
        worth: 700000,
        link: "john-jones"
    },
    {
        name: "Shem",
        rank: "Green",
        worth: 5687952,
        link: "shem-willis"
    }]
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myController">
  <ul>
      <li ng-repeat="artist in artists | orderBy: order | filter: search">
          <h3>{{artist.name}} - {{artist.worth | currency:'£'}}</h3>
           <span class="rank" style="background:{{artist.rank}}">{{artist.rank}}</span><br/>
         <a href="/artists/{{ artist.link }}.html"> View Artist</a>
     </li>
  </ul>
</div>

如何为 angularjs 数组中的每个元素创建唯一的超链接

How to create a unique hyperlink for each element in an angularjs array

angularjs