如何使用自定义指令来取代ng-repeat
自定义指令是AngularJS框架中非常重要的概念，用于扩展HTML的功能和行为。ng-repeat是AngularJS中的内置指令，用于在HTML模板中循环显示列表数据。如果要取代ng-repeat的功能，可以通过创建自定义指令来实现。
下面是一个示例代码，展示了如何使用自定义指令来替代ng-repeat：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Directive Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<my-list items="data"></my-list>
</div>
<script>
angular.module('myApp', [])
.controller('myController', function ($scope) {
$scope.data = ['Item 1', 'Item 2', 'Item 3'];
})
.directive('myList', function () {
return {
restrict: 'E',
scope: {
items: '='
},
template: '<ul><li ng-repeat="item in items">{{item}}</li></ul>'
};
});
</script>
</body>
</html>在上述示例中，我们创建了一个名为"myList"的自定义指令，通过在HTML中使用"<my-list>"标签来引用它。该指令使用restrict属性设置为'E'，表示它是一个元素级别的指令。指令的作用域通过scope属性定义，其中items属性使用'='符号进行双向数据绑定，可以接受父作用域中的"data"数据。
在指令的模板template中，我们使用ng-repeat来遍历父作用域传入的items数据，并将每个项显示为一个列表项。
此外，为了演示代码的运行，我们还引入了AngularJS的库文件。
这种自定义指令的方法可以用于替代ng-repeat的功能，通过创建自定义指令，我们可以更加灵活地控制循环渲染的方式，并且使代码更具可复用性。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能机器学习平台（AI 机器学习）：https://cloud.tencent.com/product/ml
- 腾讯云物联网套件（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动推送（Xinge Push）：https://cloud.tencent.com/product/xgpush
相关·内容
5回答
我使用的是angularjs，需要找到ng-repeat的手表，因为我需要angularjs从特定点停止工作。这是我的代码：
<ul>
<li ng-repeat="item in items">
<div>{{item.name}}</div>
</li>
</ul>
我要找到ng-repeat的守望者。如果我转到scope.$parent.$$watchers[x]并执行splice，该监视器将被移除，但如何找到特定的监视器？
浏览 2提问于2014-03-12得票数 2
目前Chrome加载40x15大小的表格大约需要6秒。它比goog.editor.Table慢得多。我需要将加载时间减少至少两倍。
<script type="text/ng-template" id="grid_item_renderer.html">
<span ng-switch on="cell.type">
<textarea ng-switch-when="simple" class="cell-text-area simple-cell" ng-model=
浏览 2提问于2013-02-06得票数 1
回答已采纳
3回答
如何知道ng-repeat指令中使用的变量的名称？
我有两个类似这样的嵌套指令：
<div data-ng-list-item-multi ng-repeat="item in items | isArray">
...
</div>
然后，该指令需要知道该item变量(即数组)中存在多少元素，但它是通过我在ng-repeat子句中选择的属性命名的属性公开的：
.directive("ngListItemMulti", function(){
return {
restrict: 'AE',
浏览 1提问于2014-07-08得票数 0
6回答
我有以下设置：
应用程序/指令
var app = angular.module("MyApp", []);
app.directive("adminRosterItem", function () {
return {
restrict: "E",
scope: {
displayText: "@"
},
template: "<td>{{ displayText }}</td>", // s
浏览 0提问于2013-04-02得票数 10
回答已采纳
假设我有一个简单的循环
<div ng-repeat="item in items">{{item.foo}}<br></div>
或
<div ng-repeat="item in items" ui-view="itemView"></div>
如何避免呈现定义标记(div)以获得：
Foo 1<br>
Foo 2<br>
Foo 3<br>
而不是：
<div>Foo 1<br></div>
<div&g
浏览 2提问于2014-12-22得票数 0
回答已采纳
1回答
解决方案:这个指令应该限制为'A‘(属性)而不是'E’(元素)，因为它扩展了常规表行的功能
考虑到这个表格标记：
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="val in [1,2,3]">header {{val}}</th>
</tr>
</thead>
<tbody>
<row-directi
浏览 4提问于2015-01-30得票数 0
回答已采纳
1回答
嗨，我想动态地创建角度模板，如下所示：
Index.html:
<div ui-view></div>
<ul class="nav-links">
<li ng-repeat="item in items">
<a ui-sref="{{item.id}}"">{{item.name}}</a>
</li>
</ul>
浏览 1提问于2015-11-06得票数 1
使用以下分页html和中继器：
<ul id="ProductListPagination" class="pagination">
<li class="disabled"><a href="#"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li>
浏览 3提问于2014-11-14得票数 1
回答已采纳
我正在使用angularjs框架执行我的第一步，我不明白如何更新第二个ng--在第一个条目ng中重复数据--只在用户单击它时重复(延迟加载)。
<table class="table table-striped table-hover">
<tbody ng-repeat="customer in customers">
<tr>
<td>
<button ng-click="loadInvoices(customer);
浏览 1提问于2014-03-09得票数 1
回答已采纳
如何创建一个类似ng-show的指令来隐藏元素而不是子元素？
我在想，如果url变量存在角度模板
<a ng-show-link="url" ng-href="{{url}}">
<img ng-src="picture.png" />
</a>
会打印出来
<a href="/url">
<img src="picture.png" />
</a>
，如果url不存在
<img src="picture.png"
浏览 0提问于2013-04-03得票数 2
回答已采纳
我正在使用angular-gridster来设计动态用户仪表板。我们如何让gridster widget数据内容响应性，同时调整widget回调的大小，有谁能建议我如何让它响应性。
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widge
浏览 1提问于2016-03-17得票数 1
<table class="col-md-12">
<th>values</th>
<tr>
<td>
<span ng-repeat="item in items">
<span ng-repeat="subitem in item.allowitems" ng-if "item.allowid = 1">
<sp
浏览 1提问于2016-04-14得票数 1
我有一个指令附加到模板内动态生成的<table>元素。该指令在link函数中操作该表的DOM。问题是，该指令在表呈现之前运行(通过计算ng-repeat指令)--然后该表为空。
问题
如何确保指令是在表完全呈现之后运行的？
<table directive-name>
<tr ng-repeat="...">
<td ng-repeat="..."></td>
</tr>
</table>
module.directive("direc
浏览 1提问于2015-08-18得票数 13
回答已采纳
我正在尝试弄清楚如何在ng-repeat的最后一次迭代中调用函数？我正在使用嵌套的ng-repeats以表格格式显示结果，并希望在加载所有表格单元格后调用一个函数。
我试着这样做：
<tr ng-repeat="(rowIndex, rowResults) in chunkedResults">
<td ng-repeat="result in rowResults">
<canvas id="item{{rowIndex}}{{$index}}"></canvas>
浏览 1提问于2015-01-22得票数 0
在下面的代码中，angular指令'myscroll‘如何知道正在创建的ng-repeat元素？
<myscroll>
<div ng-repeat="a in arr">{{a}}</div>
</myscroll>
我知道$last事件没有触发到父指令，我如何解决这个问题？
myapp.directive("myscroll", function () {
return{
restrict: "E",
transclude: true,
浏览 0提问于2013-06-13得票数 3
这也许是个愚蠢的问题，但无论如何，它还是会出现的。我知道服务就像单例一样，它有利于存储共享数据。然而，我一直在纠结于一些概念--当使用内置指令(比如ng重复)时，我们是否总是必须编写“中间人”方法来访问/操作服务中的共享对象呢？E.g
我们有
appModule.service('fruits', function(){
this.items = ["apples", "bananas"];
});
要使用ng-repeat访问这些项，我们必须首先编写控制器方法，例如
appModule.controller("fruitsCo
浏览 0提问于2013-11-07得票数 0
回答已采纳
我想在ng-repeat中呈现不同的html模板(绑定到一个模型)。
<div ng-repeat="section in sections | filter:unansweredSections">
// Here i want something like
if section == children
render div#children
else if section == work
render div#work
</div>
<div style="display:
浏览 0提问于2013-01-21得票数 2
回答已采纳
我有一个带有ng-repeat指令的表单。我使用ng-show来显示验证错误消息。我试图在ng-repeat指令中添加一条验证消息，但我遇到了麻烦。到目前为止，这就是我所拥有的：
<form name="rentalApp" ng-controller="RentalAppCtrl">
<label for="name">Full Name</label>
<input id="name" name="name" ng-model="app.name"
浏览 2提问于2014-03-20得票数 1
回答已采纳
我要做到以下几点(这不符合书面规定)：
<div ng-repeat="product in products">{{product.headline}}</div>
<div>{{product.text}}</div>
我只看到所有的标题，然后所有的文字在彼此下面。如何在附加的div元素上再次引用产品？
浏览 6提问于2015-08-10得票数 1
回答已采纳
我认为这应该很简单，但我遗漏了一些东西。如何将下面ng-repeat中的flowObj传递给我的指令？我想要将它传递给我的指令，然后在单击时使用该FlowObj，然后应用一些逻辑。我尝试在我的指令中使用注释代码
scope: {
test:"@"
}
但它似乎搞砸了我的CSS。
HTML：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; char
浏览 3提问于2013-05-18得票数 6
回答已采纳
我正在使用。当我使用st-search指令使用搜索过滤器时，当我从javascript表中更改它的值时，不会得到更新。这是我的密码
这是我的控制器
angular.module('myApp', ['smart-table'])
.controller('mainCtrl', ['$scope', '$timeout',
function ($scope, $timeout) {
var nameList = ['Pierre', 'Pol', 'J
浏览 3提问于2015-12-31得票数 0
我有一个闪卡应用程序，在这个应用程序中，我从服务器获得一组闪存卡记录，然后在ng重复循环中运行它。但是，我不想循环遍历这些平面记录，而是使用我可以调用的方法循环遍历对象集合，就像在PHP中所做的那样。
是否有一种"AngularJS“的方法来做到这一点，如果没有，那么最好的方法是什么，这样我就可以用我的记录加载闪存卡对象集合，然后在多个视图中使用ng-重复？
控制器：
mainApp.controller('browseController', function ($scope, $http, $rootScope) {
$http.get($rootScope
浏览 3提问于2015-02-25得票数 0
回答已采纳
1回答
我有很多复杂的部分和htmls，其中有很多ng-repeat。当所有东西都插入到dom中时，我想打印窗口。如何做到这一点?超时不是一个好的选择。像ngContentLoaded和ngViewContentLoaded这样的事件不起作用。问候
浏览 1提问于2015-02-24得票数 0
在阅读自定义指令的compile和link函数时，我推测在这些钩子中可以在模板创建(编译)和连接作用域以及任何被屏蔽的元素(后链接和预链接)期间进行更改。这是否也是预定义的angularJS指令的行为方式(例如，ng-repeat、ng-hide)？
例如，当在元素上找到一个ng-repeat指令时:有一个编译函数，然后指示它重复指定的元素。然后在链接函数中，在将作用域附加到每个重复元素的模板之前进行任何设置。
浏览 1提问于2020-02-24得票数 0
回答已采纳
当我试图在ng-options和ng-switch中一起使用AngularJS时，我遇到了一个问题。知道如何将ng-repeat和ng-switch结合使用吗？
浏览 2提问于2015-05-19得票数 0
回答已采纳
2回答
问题
是否有方法指示角按重复的源数据顺序对ng-repeat进行排序
否则，我如何在容器指令的上下文中使用ng-repeat的orderBy？我的用例的详细信息如下。
信息
在我的情况下，指令封装了任意的项目列表。具体来说，绑定到ng重复的数据是一个较长列表的子数组.在我的特殊情况下，我有一个指令包装了另一个利用ng-repeat的指令。例如，
<generic-list-container>
<youtube-item ng-repeat="video in vm.videos"></youtube-item>
</gene
浏览 1提问于2016-06-20得票数 0
1回答
是否有处理<table>指令的特殊规则？
我不知道为什么我不能创建一个替代<table>的指令。
我创建了一个；
我在看角度问题，但没有找到答案。很有趣。
编辑
你为什么要换桌子？
真正的模板更复杂，比如：
<div class="grid">
<div no-result-message="items"></div>
<table ng-transclude></table>
<div paging="items"></div>
浏览 4提问于2015-07-11得票数 3
3回答
我有以下代码：
<div ng-repeat="item in items">
<div ng-include src="itemG.html"></div>
</div>
然后在itemG.html中，我有：
<img src="{{item.image}}">
如何让我的ng-repeat打印出所有的图像？
浏览 3提问于2014-03-01得票数 0
所以我基本上是在创建一个嵌套了ng-repeat的table。
<div ng-controller="PresetManageController">
<table>
<in-preset ng-repeat="preset in presetManage.presets"></in-preset>
</table>
</div>
指令in-preset的模板是
<tr>
<td>{{preset.name}}</td>
<
浏览 1提问于2014-11-12得票数 3
我在我的控制器中创建了一个带有对象的项目列表
$scope.devices = [
{"id": 0, "name": "sw", "class": 'sw' },
{"id": 1, "name": "mlr", "class": 'mlr'},
{"id": 2, "name": "lvm", "class": 'lvm'},
浏览 8提问于2015-12-24得票数 0
1回答
我在angular js应用程序中有一个需要动态创建隐藏变量的需求。这些隐藏字段的名称和值属性将来自数据库。而不是将隐藏字段的实际值存储在数据库中，而是将模型的名称存储在数据库中。
我编写了一个测试函数，如下所示。TempVars将来自数据库，但目前我有几个硬编码的值。
$rootScope.populate = function () {
$rootScope.models = {
MyModel: {}
};
$rootScope.models.MyModel.Client = [];
$rootScope.models.MyMode
浏览 6提问于2016-09-27得票数 0
1回答
我为带有数据的表创建了一个元素指令。该表使用ng-repeats呈现所有行/列。
我为元素指令创建了一个属性指令。它的目的是获取不希望包含在表中的列。完整的指令可能如下所示：
<extended-table exclude="columnone, columntwo"></extended-table>
表被解释为：
<table>
<tr>
<th ng-repeat="column in columns">
{{column}}
</th
浏览 4提问于2014-08-01得票数 0
回答已采纳
我正在构建一个角度应用程序:一个培训引擎，它将向用户提供在线课程。
每个课程基本上都是一系列的“幻灯片”- HTML部分，用户可以按顺序浏览。每一张幻灯片都可以包含零个或多个不同类型的交互式小部件:简单的小测验、动手练习等等。
我的目标是使课程由纯HTML/CSS组成，这样技术含量较低的人就可以构建课程，而不必用JS或with来弄脏他们的手了。只要课程只包含静态HTML，就可以了。但是，当我想将交互式小部件添加到课程中时，就会变得很棘手。
例如，一个示例课程“幻灯片”可能如下所示：
<p>Here's some static content introducing the
浏览 1提问于2015-05-21得票数 4
3回答
使用IE8中的Angular-UI bootstrap accordion，选项卡不会展开。这是我使用IE 8的F12时收到的错误
Error: Unexpected call to method or property access.undefined
Error: No controller: accordion<div class="accordion-group ng-scope" ng-repeat="c in categories" heading="{{c.Name}}">
Error: No controll
浏览 3提问于2013-03-21得票数 6
我有以下html：
<div nag-tabs="tabsOptions">
<ul class="tabs">
<li ng-repeat="tab in tabs">{{ tab }}</li>
</ul>
<div class="tab_content">
<div ng-repeat="tabContent in tabsContent">{{ tabC
浏览 3提问于2013-03-03得票数 2
回答已采纳
2回答
我有一个选择框，如下所示：
<select ng-model="ctrl.arrayVal" ng-options="option for option in ctrl.myarray"></select>
其中ctrl.myarray看起来类似于：
ctrl.myarray = [100, 200, 700, 900];
这一切都很好，但是为了自动化测试的目的，我需要为每个动态生成的选项提供一个id。因此，例如，如果我用ng-repeat重写了它，那么我就需要这样的东西：
<select ng-model="ctrl.a
浏览 4提问于2016-01-26得票数 2
回答已采纳
我试图有条件地显示一个基于父作用域中存储的布尔值的指令。我不明白为什么下面的方法不起作用。所谓“不工作”，我的意思是这两个指令都没有显示。
<ul class="nav navbar-nav pull-right" ng-switch="userIsAuthenticated">
<account-item item="accountMenuItem" ng-repeat="accountMenuItem in anonymousMenuItems" ng-switch-when="false&
浏览 5提问于2014-04-04得票数 1
我有一个观点，
<li ng-repeat="img in people.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
它起作用了。但我在这里怀疑的是，属性ng-click应该在双花括号内设置为img，以便在ng-src中作为ng-click="setImage({{img}})"执行。如下所示，
<li ng-repeat="img in people.images">
<im
浏览 2提问于2014-07-20得票数 2
1回答
我一直试图做的是有条件地设置用于排序ng-重复值的值。
我尝试的是采用用于添加ng类的条件方法，如下所示：
ng-class="{'active':item.selected}"
并将其与日期orderBy方法相结合：
ng-repeat="item in filterPosts | orderBy:['yyyy','mm','dd']"
这将导致以下两种情况之一，但不幸的是，这些都不起作用。
ng-repeat="item in items | orderBy: [{('yyyy
浏览 1提问于2015-01-06得票数 0
回答已采纳
我有一个自定义指令，但在ngRepeat中使用它时遇到了问题。例如，在下面的taco示例中，在ng-repeat属性中别名为taco的对象似乎无法从指令的定义中访问。
app.tpl.html
<div ng-repeat="taco in tacoController.tacos">
<taco></taco>
<div>
taco.directive.js
(function() {
angular
.module('food')
.directive('
浏览 0提问于2017-12-06得票数 0
是否可以在不指定名称的情况下在ng-repeat中获取元素的单击行(作用域)？
例如:全局可以工作，但当我将persons更改为另一个名字时，我不能使用我的指令scope.person。
我需要数据来做这样的编辑：
我将编写一条指令，将文本转换为一个输入字段。要保存它，我需要字段的名称，示例中的"lastname“和行中的ID。
HTML：
<tr ng-repeat="person in persons | orderBy:lastname">
<td class="editable">{{person.lastname
浏览 0提问于2015-03-27得票数 2
我正在尝试用angular创建一个svg元素。目前我可以执行ng-repeat，但是当我尝试为属性赋值时，我得到了一个错误。
<g ng-repeat="cell in row">
<rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
<text x="10" y="10">{{cell.node.name}}</text>
</g>
有趣的是，cell.node.name确
浏览 2提问于2012-11-29得票数 14
回答已采纳
我使用AngularJS(v1.28) ng-repeat指令列出一组用户，如下面的代码所示。某些用户可以在标题为帐户模式的列中查看用户帐户的状态(打开或关闭)。其他用户(管理员)应该会看到一组单选按钮，这些按钮显示帐户的当前状态，但也允许他们更改状态。确定用户应该看到的内容所需的所有信息都在$scope.groups中。下面的代码提供了我在屏幕上所期望的，但是ng-click函数似乎从未被调用过(这就是问题所在)。我看了看周围，似乎问题是我必须在字符串上调用编译？然而，当我这样做和return $sce.trustAsHtml($compile(controlHtml));时，我在屏幕上看不
浏览 2提问于2015-03-04得票数 1
1回答
子过滤器收集
、、、
我有以下虚构的对象，我正在尝试过滤：
{
"0":{
"boy":{
"age":"32",
"name":"Daniel Grey"
}
},
"1":{
"boy":{
"age":"23",
"name":"John
浏览 2提问于2014-09-06得票数 3
回答已采纳
1回答
我正在通过调用jquery的$scope.items来显示ng-repeat中每一项的表行，以防止出现jquery弹出。虽然如果我删除ng-repeat，它可以工作，但我只能得到一行。
为什么会这样呢？如何使它能够使我的项目数组中的每一项，在表中有一行工作日期选择器。我想datepicker()函数是在ng重复之前调用的吧？
我的html看起来像这样
<div class="content" ng-controller="tableCtrl">
<div mydirective>
</div>
</di
浏览 5提问于2014-05-17得票数 3
回答已采纳
2回答
有更好的方法来写这个吗？我只是不想重复清单的内部内容两次。
<div ng-switch on="list.type">
<ul ng-switch-when="unorder">
<li ng-repeat="item in items">
{{ item.text }}
</li>
</ul ng-switch-when="unorder">
<ol ng-switch-when="order
浏览 6提问于2015-11-11得票数 0
回答已采纳
1回答
我试图在ng-init中调用ng-repeat函数，它只对第一个元素起作用：
<li ng-repeat="comment in ad.comments|limitTo:quantity | orderBy : sortComment : true">
<div id="starsDiv" ng-init="orderComment(comment.stars)"></div>
Comment: {{comment.text}}
<cite clas
浏览 1提问于2015-11-02得票数 0
回答已采纳
在我的web应用程序中，在搜索结果中，每个项目可以根据项目的类型有不同的外观。为了实现这一点，我考虑在json响应中包含包含该特定项的数据占位符的布局。如何将范围数据绑定到json响应模板中的占位符？
就像。我的搜索结果应该如下所示：
<li ng-repeat="item in items">
<div ng-bind-html="item.template"></div>
</li>
而JSON响应看起来应该是：
[{
"template_name":"One",
"te
浏览 2提问于2014-08-21得票数 1
回答已采纳
我有一个在表中创建行的指令，如下所示：
angular.module("myApp").directive('personRow', function() {
return {
template: "<tr><td>{{person.name}}</td><td>{{person.age}}</td></tr>"
}
});
但是，当我尝试在集合上使用此指令和ng-repeat时，我得到了一些非常奇怪的结果--下面是我的页面：
<div ng-app
浏览 0提问于2018-06-24得票数 0
我有一个这样的自定义指令：
<user-preview closable="true" user="user" ng-repeat="user in users"></user-preview>
如您所见，我向它传递了两个属性：closable和user。对于user来说，一切都很好，它会到达指令的内部模板。但closable并非如此，它存在于内部作用域中，但在模板中由于某种原因它是undefined。如果我将ng-repeat移到外部标记，它会起作用：
<span ng-repeat="user in us
浏览 0提问于2015-09-27得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
