在AngularJS ng-repeat目录中使用href
，可以通过ng-href指令来实现动态绑定链接地址。ng-href指令会根据表达式的值动态生成链接地址，并将其赋值给href属性。
具体使用方法如下：
- 在ng-repeat指令所在的元素上添加ng-href指令，将表达式作为其属性值。
- 在表达式中使用{{}}语法，可以引用作用域中的变量或函数，来动态生成链接地址。
示例代码如下：
<ul>
<li ng-repeat="item in items">
<a ng-href="{{item.url}}">{{item.name}}</a>
</li>
</ul>在上述示例中，ng-repeat指令会遍历items数组，并为每个数组元素生成一个li元素。ng-href指令会将item.url的值动态绑定到a元素的href属性上，从而生成对应的链接地址。item.name则作为链接的文本内容显示。
这样，当items数组中的数据发生变化时，链接地址也会相应更新。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（Cloud Virtual Machine，CVM）是腾讯云提供的弹性计算服务，为用户提供可扩展的计算能力。您可以根据业务需求选择不同配置的云服务器，并根据实际使用情况弹性调整计算资源。
产品介绍链接地址：腾讯云云服务器（CVM）
相关·内容
我无法使用AngularJS正确地实现部分视图。我引用了ProAngularJS一书中的一个例子(清单10-12)。但是，即使是该示例在启动浏览器时也不会呈现部分视图。
我只是在文件资源管理器中选择主html文件并在浏览器中运行它。在主html页面中，绝对没有剩余的table.html显示为部分视图。
至少，我希望从部分视图中看到"Action“和"Done”作为表标题显示。然而，我什么也得不到。
我遗漏了什么？
主页：
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
浏览 3提问于2014-07-14得票数 1
回答已采纳
5回答
关于如何在ngRepeat指令中实现项删除有相当多的问题，据我所知，它归结为使用ngClick并触发一些remove函数传递给它项的$index。
但是，我找不到有多个ngRepeats的示例：
<div ng-controller="MyController">
<div ng-repeat="email in user.emails">
{{ email }} <a href>Remove</a>
</div>
<div ng-repeat="
浏览 72提问于2013-08-15得票数 57
1回答
我有动态面包屑数据。我在DOM中绑定了ng-重复：
<ul>
<li class="list-item" ng-repeat="breadCrumb in breadCrumbs">
<a href="javascript:void(0);">{{ breadCrumb.name }}</a>
</li>
</ul>
我想计算每一个重复的ul宽度，并与容器的宽度进行比较。如果容器宽度小于ul宽度，则要添加所有以前的li元素隐藏类。
例如：
[
浏览 4提问于2015-11-27得票数 1
回答已采纳
2回答
我有两个问题。
1)如何使用angularjs翻译和ng-repeat？
我有一个Json文件，所有的文本都可以工作，但是ng-repeat不行。我在json中的片段：
"rules":{
"points":[
{"text":"1"},
{"text":"2"},
{"text":"3"}
]
}
我试着写这样的东西，但它不起作用：
<ul ng-repeat="rule in
浏览 0提问于2018-01-27得票数 0
我希望有类似于以下使用AngularJS的HTML代码：
<p class="itemsperpage">Items per page: <span>20</span> <span><a href="#">40</a></span> <span><a href="#">60</a></span> <span><a href="#">View all</a></
浏览 2提问于2015-04-30得票数 1
回答已采纳
我有一个用AngularJS创建的应用程序，它有一个带状菜单。我要做的是为每个菜单创建子菜单。可以通过在我现有的菜单列表项下添加额外的<ul> <li> ... </li> </ul>来创建子菜单。我该怎么做呢？
这是我的AngularJS调用代码：
<div id="menu">
<ul>
<li ng-class="{selected: $index==currPage}" ng-repeat="page in data.pages">
浏览 0提问于2013-05-30得票数 1
2回答
AngularJs未通过
、、、
我有一份员工名单。现在，我想将每条记录链接到一个员工配置文件。但不管我怎么做，它都不起作用。
这是我的代码：
<tr ng-repeat="employee in homeCtrl.employees" ng-href="#/werknemer/{{employee.EmployeeId}}">
<td>{{ employee.Role }}</td>
<td>{{ employee.Company }}</td>
<td>{{ employee.FirstNa
浏览 0提问于2016-03-24得票数 1
1回答
我正在尝试使用ng-if= "condition == {{date | date:"M"}}"在ng-repeat中选择对象
{{date | date:"M"}}在我的Angular页面中工作，返回"5"；但似乎不能在我的ng-if中工作。有谁能给我指个方向吗？
下面是不起作用的代码：
<li ng-repeat="task in tasks" ng-if="task.month == {{date | date:"M"}} || task.month == 0">
浏览 0提问于2015-05-13得票数 1
1回答
我是第一次接触angularjs carousel概念。我想增加旋转木马指示器的空间。下面是我的angularjs代码，请在这方面帮助我。
<div class="carouselContainer"">
<carousel interval="interval">
<div class ="carousel-inner">
<slide ng-repeat="slide in slides" active="
浏览 0提问于2015-09-18得票数 0
我在一个应用程序中遇到了这个问题，并设法隔离了这个问题。我在另一个里面重复了一个。它将如预期的那样工作，除了外部ng-重复的<a>标记最终在内部重复之外。解释起来有点困难，下面是代码：
<ul class="nav nav-list">
<li ng-repeat="item in items">
<a href="upperLevel.html" >
<span >{{item.name}}</span
浏览 2提问于2013-10-28得票数 3
回答已采纳
5回答
我正在尝试使用angular js将css动态添加到我的html head中。以下是示例代码
<div ng-repeat="stylesheet in stylesheets">
<link href="/myapp/{{stylesheet.href}}" type="{{stylesheet.type}}" rel="stylesheet" media="{{stylesheet.media}}" title="{{stylesheet.title}}" /&
浏览 0提问于2012-08-11得票数 18
回答已采纳
我是角质方面的初学者！帮帮我求你了！有一个webapp (本地目录浏览器)。我有app.js：
var currentPath = "http://localhost:9298/api/browse";
angular.module("browserApp", [])
.controller("BrowseController", function ($scope, $http) {
function getDirectoryBrowseModel(path) {
$http.get(path,
浏览 2提问于2016-05-16得票数 0
回答已采纳
我正在测试AngularJS。我正在尝试使用http.get读取json文件，并将其显示在ng-repeat中。
我有两个问题。
首先，无法识别扩展名为.json的文件。我必须使用.js扩展名将其重命名
其次，文件中的格式元素无法识别。中继器充满了空行。
这是我的Angular.html
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Ajax</title>
<script src="https://ajax.goog
浏览 0提问于2017-09-20得票数 0
在AngularJS中，在下面的场景中，火狐将unsafe:放在以以下方式生成的urls之前。然后它会显示一个错误页面，上面写着“地址不被理解”。这是我本地PC上的文件请求。
链接：
<li ng-repeat="fruit in fruits">
<a href="{{ fruit.link }}">{{ fruit.title }}</a>
</li>
数组：
$scope.fruits = [
{ "title" : "Orange",
浏览 0提问于2013-03-26得票数 25
我有一个搜索返回的对象的索引。模板具有ng重复，其中项的URL是从模型中的数据构造的，但在最终标记中，"a“标记不起作用。ng-href和href是正确的，当单击链接但页面不加载时，地址栏会发生变化。点击后进行浏览器刷新，就会得到页面。因此，某种角度上的东西正在改变地址栏，但不会触发负载？
因为问题似乎是在$resource.query()函数之后将json加载到模板中，而我不能从jsfiddle中这样做。通过模拟查询加载静态数据，jsfiddle可以工作，即使最终标记看起来是相同的。
AngularJS模板如下所示：
<div ng-controller="VideoS
浏览 4提问于2013-11-04得票数 68
回答已采纳
我试图在一个使用ng-repeat的div中插入一个href链接。这个href链接需要与使用ng-repeat创建的每个div不同，它的值是AngularJS $scope变量的一部分。
下面是我的JS代码：
var app = angular.module('test', []);
app.controller('MainCtrl', function($scope) {
var database = firebase.database();
database.ref(`trips/${userid}/trips`).once('va
浏览 1提问于2017-07-25得票数 0
回答已采纳
我在另一个ng重复列表中有x个ng重复，如下所示：
<div ng-repeat="object in objects">
<div ng-repeat="item in object">
<a href="{{url}}"><p>{{title}}</p></a>
</div>
<div ng-repeat="item in object">
<a href="{{url}}">
浏览 0提问于2016-02-26得票数 1
我使用ng-repeat在angular中构建了一些东西
<ul class="messages">
<li ng-repeat="e in enquiries">
<img src="/img/avatar.jpg" alt="">
<div>
<div>
浏览 2提问于2015-04-26得票数 0
我已经验证了所有的JSON对象&它们已经成功地添加到VoteCtrl的$scope中(见右图)。据我所知，我的表达式应该从我的JSON模型中选择所需的数据。所以我的问题是，为什么这个不起作用&，我在这里遗漏了什么？
<!-- National -->
<li ng-repeat="nationalHeader in votingTopics" class="nav-header">
{{
浏览 0提问于2013-06-08得票数 0
回答已采纳
2回答
使用angularJS，我将jQuery DOM元素附加到一个ng-repeat结构中，并希望该元素能够使用我的角度控制器(removeMember)中的方法。显然，目前这是行不通的。以下是我的代码
$( "#table tbody" ).append( "<tr class="+id_of_member+"><td>"+user_email+"</td><td><a href=\"#/\" ng-click=\"teamCtrl.removeMember(&
浏览 3提问于2015-03-01得票数 0
看看我的儿子：
{
"cartItems": {
"743919183": {
"code": "743919183",
"title": "Responsive Website Package",
"url_image": "http://www.domain.com/someimage.jpg",
}
}
}
我想显示url_image的值，但很难在cartItems之后传递。FYI，那个数字7439
浏览 0提问于2014-08-28得票数 0
回答已采纳
1回答
我正在使用一个工具从亚马逊获取一些数据。当我深入到angular中所需的数据时，它起作用了。我的代码是：
<div ng-controller="StoreController as store">
<div ng-repeat="item in store.items">
<a ng-href="{{item.ItemLinks[0].ItemLink[0].URL}}">{{item.ItemAttributes[0].Title[0]}}</a>
</d
浏览 0提问于2015-11-18得票数 0
这是我的html代码
<body ng-app="mainapp">
<div id="wrapper">
<div class="tree" ng-controller="MenuController">
<ul>
<li ng-repeat="menu in menulist">
<a>{{menu.title}}</a>
<ul>
<li
浏览 3提问于2015-04-30得票数 0
嘿，伙计们，我对uikit幻灯片+ angularjs有点问题。当我使用ng-repeat尝试将所有图像带到uk-slideshow时，图像不会显示。有没有人有类似的问题？当我从div中删除ng-repeat标签时，图像会返回。我现在很困惑。
<div class="uk-width-1-2" ng-repeat="property in properties">
<div class="uk-slidenav-position" data-uk-slideshow="{animation: 'scrol
浏览 0提问于2016-04-16得票数 1
如何使用ng-repeat指示数组中的哪些项要显示？例如，我只想重复快照数组中的4-6个快照。
<div class="shot" ng-repeat="shot in shots">
<!-- only show shots 4-6 in the array -->
<a href="{{ shot.url }}"><img ng-src="{{ shot.thumbnail }}"></a>
</div>
浏览 0提问于2019-08-11得票数 1
我对AngularJS相对来说是个新手。在尝试创建指令时，我可以了解这个问题：如何动态地添加/删除指令元素的子元素的属性，当这些子元素被动态地添加为“ng-重复”？时。
首先，我想到了这个解决方案：
模板
...
a.list-group-item(ng-repeat='playlist in playlists', ng-click='addToPlaylist(playlist, track)', ng-href='playlist/{{ playlist._id }})
...
*指令
link: function(scope, elm, attr
浏览 5提问于2016-02-13得票数 2
回答已采纳
在以下示例中：
<div class="sub-list" ng-repeat="item in list.subItems">
<a class="list-row" href="#">
<span class="list-cell name">item.name</span>
<span class="list-cell dt">item.dt</span>
<span class=&#
浏览 3提问于2016-04-04得票数 0
回答已采纳
3回答
我有离子应用。现在我有了下面的代码。
<div class="row">
<div class="col col-33" ng-repeat="(key, value) in categoryMenuOut">
<a href="#/category/{{chosenCat}}/{{key}}">
`some code`
<span class="name">{{value.name}}</span>
&l
浏览 0提问于2016-07-21得票数 0
我正在用Parse开发后端。我可以从解析中获得数据，但是我不能用ng-repeat和AngularJS来显示数据。
app.controller('QuestionsController',['$scope', function ($scope) {
var query = new Parse.Query(_Categories);
query.find().done(function(data){
$scope.Categories = data;
console.log($scope.Categories);
});
$scop
浏览 0提问于2015-10-15得票数 0
1回答
请参考。问题:当我在主控制器中使用item-over指令时，它会触发fine OnOver。这样可以正常工作：
<a href="#" ng-repeat="item in main.Data" item-over="main.OnOver(item)">{{item.Name}}</a>
但是当我把它放在list-view指令中时，它不会触发控制器的OnOver方法。这不起作用：
<list-view itemssource="main.Data">
<a href="
浏览 19提问于2017-12-30得票数 0
回答已采纳
在嵌套的ng中继器中切换元素的最佳实践是什么？我有以下角度模板：
<div>
{{question.Description}}
<div ng-repeat="answer in question.Answers">
<a href="#" ng-click="answerQuestion(question, answer.ID, $index)">{{answer.Description}}</a>
<div ng-repeat="qA
浏览 3提问于2015-01-08得票数 0
回答已采纳
我有一个像下面这样的数组；
$scope.cart = [];
它包含诸如id、name等项。
如何将这些项目包括在href中，如下所示；
<a href="http://www.example.co.uk/search-menu/{{$scope.cart.restaurant_id}}/test">
这不管用。
我也尝试过使用ng-repeat=item in cart
当我console.log($scope.cart)的时候，我得到了下面的信息；
[Object]
0: Object
cookie_id: "j0m3hdkf4c371nueajdi9
浏览 3提问于2015-11-24得票数 0
回答已采纳
我有这两个循环
<ion-list>
<ion-item ng-repeat="category in categories" href="#">
{{category.name}} {{category.id}}
<ion-item ng-repeat="test in tests" href="#">
{{test.name}} {{test.cat_id}}
</ion-item&
浏览 1提问于2014-04-25得票数 1
回答已采纳
Ng-repeat在选择选项中未显示任何数据。在select for ng-repeat中显示选项值有什么不同的方式吗
当我在select标签中使用不带class=的“选择器”时。它工作得很好。如何在ng-repeat中使用bootstrap select。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.11/css/bootstrap-select.min.css">
<script src="http
浏览 2提问于2019-10-24得票数 0
我是AngularJS的新手，所以请对我好一点。-P
所以我用ng循环了两次，如下例所示：
<ul>
<li ng-repeat="b in aMSG">
<p>{{b.name}}</p>
<ul>
<li ng-repeat="c in b.x"><a ng-click="getM($parent.$index,$index)" href="#">{{c.name}}<
浏览 2提问于2014-02-08得票数 0
回答已采纳
3回答
我对AngularJs中的ng-repeat有一个问题。我有一个具有3个不同键的对象数组，其中一个键是一个对象数组。因此，我只对主数组使用ng-repeat，如下所示：
<div class="post-content" ng-repeat="post in nfc.posts track by $index">
...
</div>
一切都很好。但是，当我在这个循环中使用嵌套的ng-repeat时，我什么也得不到。我在嵌套ng-repeat之前经常使用，没有遇到任何问题。以下是代码：
comments:: {{post.commen
浏览 0提问于2018-05-11得票数 1
我正在从Tuts+ Easier Apps with Angularjs教程中学习AngularJS。现在我在他们讨论使用ng-view的Routing Primer的部分。我试图在索引页面的ng-view中显示列表页面内容。由于某些原因，当我加载index.html时什么也没有显示。我在搜索中发现，从angular 1.2.0开始，ngRoute已经移到了自己的模块中。我必须单独加载它并声明依赖项。但我仍然不能显示我的列表页面中的任何内容。
index.html
<!doctype html>
<html ng-app="myApp">
<h
浏览 0提问于2014-06-22得票数 4
回答已采纳
我正在尝试使用ng-repeat来创建我的头文件：
<ul class="right">
<li><a href="#carousel">Início</a></li>
<li><a href="#about-us">Sobre</a></li>
</ul>
要这样做：
浏览 1提问于2017-02-22得票数 0
回答已采纳
1回答
我正在使用ng-repeat创建一个视频列表。我需要在每一行设置图像的rel属性。我正在尝试以下几种方式：
<li ng-repeat="video in top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3
浏览 2提问于2016-06-01得票数 0
我正在尝试从一个角度控制器创建一个下拉列表:我的html代码：
<select>
<option value="" disabled selected >Choose your option</option>
<option ng-repeat="ty in type">{{ty.$value}}</option>
</select>
控制器代码：
var typeRef = new Firebase(FIREBASE_URL + "/type");
var
浏览 0提问于2015-08-19得票数 0
我一直试图设置我的ng-包括如下：
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js">&l
浏览 2提问于2013-11-17得票数 1
回答已采纳
1回答
我试图在AngularJs中动态显示链接。
我的Js Fiddle在这里：
由于某些原因，标记不是填充标记中的值，而是来自控制器的属性。
标记
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<div class="collapse navbar-collapse" uib-collapse="navCollapsed">
<ul class="nav navbar-nav navba
浏览 0提问于2017-02-17得票数 1
1回答
尽量减少代码(避免编写排序函数)。我有一个简单的数据表是可以排序的。
本例中的问题是“分数”不按数字排序。用户'Julie‘的得分最低，为'9.12’，但排序时似乎是在词汇上这样做。
该示例是中使用的示例的修改版本。
下面是代码片段和相关的柱塞。
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
<hr/>
<table class="user">
<tr>
<th><a
浏览 3提问于2014-03-13得票数 0
回答已采纳
7回答
<ul ng-cloak>
<div ng-repeat="n in list">
<li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
<li class="divider"></i>
</div>
<li>Additional item</li>
</ul>
但是，<div>元素在某些浏览器上造
浏览 0提问于2012-10-12得票数 91
回答已采纳
2回答
我有需要在表格中显示的员工记录
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<
浏览 0提问于2016-10-08得票数 0
1回答
我正在使用下面的代码在我的angularjs项目中包含dynamic less样式表。
<link ng-repeat="stylesheet in getStylesheets track by $index" rel="{{ stylesheet.type }}" type="text/css" ng-href="{{ stylesheet.href }}" >
问题是less.js不能动态编译它。
浏览 4提问于2015-12-31得票数 0
我正在努力学习AngularJS，我正在制作一个测试应用程序。我有一个表，它使用WebService (发行者列表)通过$http.get()返回的数据填充。
当用户单击某一行(发布服务器)时，我希望使用所选发布服务器的员工列表填充第二个表。通过使用F12 tools (Network+Console)，我看到返回了数据，但是第二个表没有被填充/更新。
html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UT
浏览 2提问于2014-05-09得票数 1
1回答
如果我只想显示值的一部分，我会使用带有"ng-repeat“的div。例如，我只想要字符串的前20个部分，而不是完整的{{file.Name}}，我该怎么办？
<pre>
<div ng-repeat="file in Attachment">
<div style="position:relative;padding:1px; float:left">
<div onmouseover="AttachmenHover({{file.Name}})" >
<a h
浏览 1提问于2014-12-17得票数 0
1回答
Angularjs过滤器无序列表
、、、、
我试图在静态无序列表中过滤字符串。我能够过滤数组中的项，但不确定如何对静态html内容进行筛选。
我已经学会了使用数组来实现它的方法是使用以下方法：
<input type="search" ng-model="name" />
<ul>
<li ng-repeat="person in people | filter:name">
{{ person }}
</li>
</ul>
我正试图使用现有的<ul>实现同样的效果
<input typ
浏览 1提问于2013-12-02得票数 2
回答已采纳
如何在AngularJS中仅显示div时在json文件名中包含例如jpg字符串？
我有一个与.jpg，pdf和其他东西的json文件列表。我使用ng-repeat和filter{filename:'jpg'}显示主题。效果很好。但是当jpg不存在时，如何隐藏div呢？
<div>
<div>JPG FILES</div>
<ul ng-repeat="">
<li>name<a href='#'>download</a></li>
浏览 3提问于2014-07-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
