天道酬勤,学无止境

角度跟踪和 orderBy(angular track by and orderBy)

问题

开始使用 Angular 并进行演示。 在模型中,事件项包括一个称为starts_at 的开始时间和一个标题。

我有一个使用 ng-repeat="event in events track by $index" 的标签,并尝试添加 "|orderBy: event.starts_at" 在我删除 track 部分之前,它似乎并没有以任何方式影响排序。

track 是否禁用任何用于在 angular 中排序的选项?

回答1

根据文档: https://docs.angularjs.org/api/ng/directive/ngRepeat 过滤器表达式(我怀疑,顺序)跟踪表达式之前出现。

例子:

item in items | filter:searchText track by item.id

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 重复 groupBy 和保持顺序的角度(Angular ng-repeat groupBy and Keep order)
    问题 我使用这个过滤器 https://github.com/a8m/angular-filter#groupby 像这样对我的数据进行排序,而且效果很好: <div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' "> 现在我试图保持这些组的顺序,按category.order。 这可能吗? 我试着像这样管道它: <div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name' | orderBy:'category.order' "> 但它没有任何区别 回答1 orderBy过滤器不适用于ngRepeat对象。 所以,你可以做的是这样的: <!-- Note: toArray filter also attaches a new property $key to the value containing the original key that was used in the object. --> <div ng-repeat="tags in tagsList | groupBy:'prop' | toArray:true | orderBy:'$key'"> Group name: {{
  • Angular, limitTo 和 $index 跟踪(Angular, limitTo and track by $index)
    问题 我正在尝试通过过滤来限制进入的对象(因为最终会有一个显示所有对象的选项),但是在尝试 limitTo 和按索引跟踪时遇到了问题。 这是代码: <div ng-repeat="item in filter.values track by $index | limitTo:filterLimit" class="cengage-builder-result-filter-value" value="item" update-filter="updateFilter"> 在控制器中: $scope.filterLimit = 5; 它说我在角度错误中被骗了,所以我认为 $index 的轨道在这里不起作用。 似乎找不到合适的方法来做到这一点,可以使用一些帮助。 谢谢! 回答1 过滤器,如limitTo 、 orderBy等...必须在track by之前,因为它们适用于数组源,而不是track by表达式。 <div ng-repeat="item in filter.values | limitTo:filterLimit track by $index"> 回答2 试试这个 Use limitTo before track by <div ng-repeat="item in filter.values | limitTo:filterLimit track by $index"
  • 反向角度重复(angular ng-repeat in reverse)
    问题 我怎样才能得到一个角度反向阵列? 我正在尝试使用orderBy过滤器,但它需要一个谓词(例如'name')进行排序: <tr ng-repeat="friend in friends | orderBy:'name':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr> 有没有一种方法可以反转原始数组,而不进行排序。 像那样: <tr ng-repeat="friend in friends | orderBy:'':true"> <td>{{friend.name}}</td> <td>{{friend.phone}}</td> <td>{{friend.age}}</td> <tr> 回答1 我建议使用这样的自定义过滤器: app.filter('reverse', function() { return function(items) { return items.slice().reverse(); }; }); 然后可以这样使用: <div ng-repeat="friend in friends | reverse">{{friend.name}}</div> 看到它在这里工作:柱塞演示 该过滤器可以根据您的需要进行定制,以适应您的需求。
  • 带空对象的角度排序(Angular Sorting with null objects)
    问题 当我按ASC排序时,我需要记录顶部带有空值的记录 <tr ng-repeat="footballer in footballers=(footballers | orderBy:predicate)"> predicate : ['team.name','id] 一些足球运动员没有团队,因此team object == null和team.name==null ,我需要将它们放在顶部 我想重写排序函数,但是我需要保存谓词 回答1 您可以在控制器中使用如下所示的内容: $scope.nullsToTop = function(obj) { return (angular.isDefined(obj.team) ? 0 : -1); }; 在HTML上: <tr ng-repeat="footballer in footballers | orderBy:[nullsToTop].concat(predicate)"> 这样,您可以单独维护谓词。 只需在orderBy表达式中连接nullsToTop函数即可首先运行它。 柱塞 回答2 在控制器中创建一个函数,该函数将接收实体的参数并将返回['team.name','id] []或其他值,这些值将有助于将不可排序的元素推到列表的顶部/底部。 编辑(示例) HTML: <li ng-repeat="item in items |
  • 角度2排序和过滤器(angular 2 sort and filter)
    问题 在Angularjs 1中,可以通过以下方式进行排序和过滤: <ul ng-repeat="friend in friends | filter:query | orderBy: 'name' "> <li>{{friend.name}}</li> </ul> 但是我在Angularjs 2.0中找不到如何执行此操作的任何示例。 我的问题是如何在Angularjs 2.0中进行排序和过滤? 如果仍然不支持它,是否有人知道何时或是否将其放入Angularjs 2.0? 回答1 这不是开箱即用的,因为Angular团队希望Angular 2可以缩小运行。 OrderBy的思考会因缩小而中断。 查看MiškoHeverey对此事的回复。 我花了一些时间来创建同时支持一维和多维数组的OrderBy管道。 它还支持能够对多维数组的多个列进行排序。 <li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li> 此管道确实允许在渲染页面后将更多项目添加到数组,并且仍然正确地对包含新项目的数组进行排序。 我在这里写了有关该过程的文章。 这是一个工作示例:http://fuelinteractive
  • 角度过滤器有效,但会导致“达到10次$ digest迭代”(Angular filter works but causes “10 $digest iterations reached”)
    问题 我从后端服务器接收数据,其结构如下: { name : "Mc Feast", owner : "Mc Donalds" }, { name : "Royale with cheese", owner : "Mc Donalds" }, { name : "Whopper", owner : "Burger King" } 以我的观点,我想“反转”列表。 即,我想列出每个所有者,并为该所有者列出所有汉堡包。 我可以通过在过滤器中使用underscorejs函数groupBy来实现此groupBy ,然后将其与ng-repeat指令一起使用: JS: app.filter("ownerGrouping", function() { return function(collection) { return _.groupBy(collection, function(item) { return item.owner; }); } }); HTML: <li ng-repeat="(owner, hamburgerList) in hamburgers | ownerGrouping"> {{owner}}: <ul> <li ng-repeat="burger in hamburgerList | orderBy : 'name'">{{burger.name}}</li> <
  • AngularJS orderBy 不适用于 ngOptions 中的 track by?(AngularJS orderBy does not work with track by in ngOptions?)
    问题 我正在尝试通过track by对ngOptions进行排序 这是我的模板 <select ng-model="asd" ng-options="user.id as user.name for user in users track by user.id | orderBy: 'name'"> 这是我的控制器 function AppCtrl($scope) { $scope.users = [ {id : 25, name: 'Batista'}, {id : 26, name: 'Ultimate Warrior'}, {id : 27, name: 'Andre the giant'} ]; $scope.name = 'asdasd'; $scope.asd = 25; } 我在 JSBin 中写了一个片段来演示这一点。 问题是排序不起作用。 我应该编写自定义过滤器吗? 回答1 为了使用带过滤器的track by需要在过滤器后添加track by表达式。 试试这个: user.id as user.name for user in users | orderBy: 'name' track by user.id ngRepeat 的文档在“参数”部分提到了这一点,特别是: 在指定跟踪表达式之前,应将过滤器应用于表达式。 和 例如:项目中的项目 | filter
  • ng-class-odd 不能正常工作(ng-class-odd not working properly)
    问题 所以,我有这个控制器 $rootScope.nhCount = 0; angular.forEach(data, function(value, key) { $rootScope.nhCount = $rootScope.nhCount + 1; }); 我的 html 尝试像这样使用ng-class-odd和ng-class-even <ul ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'" > <li ng-repeat="nhCount in nhCount.data| orderBy:'date':true"> 我使用在这里找到的 css。 根据ng-class-even / ng-class-odd它应该将所有其他内容块放在屏幕的右侧或左侧。 它不工作。 即使我移动<li>的ng-class-odd="'timeline-inverted'" ng-class-even="'timeline'"仍然无法正常工作。 我怎样才能使这项工作? 我在这里缺少什么? 谢谢 回答1 ngClassOdd 和 ngClassEven 指令只能在 ngRepeat 的范围内应用。 所以你必须写这样的东西: <li ng-repeat="item in items"> <span ng-class-odd="
  • AngularJS订购后错误的$ index(Angularjs wrong $index after orderBy)
    问题 我是Angular.js的新手,在排序数组和处理排序后的数据时遇到一些问题。 我有一个包含项目的列表,并希望按“ Store.storeName”对其进行排序,到目前为止,该列表仍在起作用。 但是在对数据进行排序之后,我的删除功能不再起作用。 我认为那是因为$ index在排序后是错误的,因此删除了错误的数据。 我该如何解决? 在范围内而不是在视图中排序数据? 怎么做? 这是一些相关的代码: 在视图中: <tr ng-repeat="item in items | orderBy:'Store.storeName'"> <td><input class="toggle" type="checkbox" ng-model="item.Completed"></td> <td>{{item.Name}}</td> <td>{{item.Quantity}} Stk.</td> <td>{{item.Price || 0 | number:2}} €</td> <td>{{item.Quantity*item.Price|| 0 | number:2}} €</td> <td>{{item.Store.storeName}}</td> <td><a><img src="img/delete.png" ng-click="removeItem($index)">{{$index}}<
  • angular track by and orderBy
    Starting to use Angular and playing with a demo. In the model, the event item includes a start time called starts_at and a title. I had a tag using ng-repeat="event in events track by $index" and tried adding in "|orderBy: event.starts_at" It didn't seem to influence the sorting in any way until I removed the track section. Does track disables any option for sorting in angular ?
  • AngularJS - 对带有数字的字符串进行 ng-repeat 排序(AngularJS - Sorting ng-repeat on string with numbers in them)
    问题 我在表格视图中有一个对象列表,我想正确排序。 除其他外,我的对象包含一个名称字段。 此名称字段还可以包含数字,例如: Chairman Seat 1 Seat 2 Seat 3 Seat 11 Seat 12 Seat 23 Secretary 然而这是这样排序的: Chairman Seat 1 Seat 11 Seat 12 Seat 2 Seat 23 Seat 3 Secretary 在按名称排序时,这似乎不是对我的列表进行排序的自然方式。 现在我像这样使用 ng-repeat: seat in seats | orderBy:orderField:orderReverse track by seat.id seat in seats | orderBy:orderField:orderReverse track by seat.id其中orderfield是单击表头时设置的一些变量, orderReverse也用于反转。 我尝试制作自定义过滤器以确保其正常运行,但我失败了。 除非我分解字符串,否则 Javascript 似乎不会正常订购它。 但我宁愿不这样做,因为数据通常是通过轮询来更新的。 另一种方法是强制前导零,但由于用户手动输入这些内容,我不确定我是否应该这样做。 此外,它不仅名称中有数字,所以我不能完全切断它们 那么,有关如何使此列表正常显示的任何建议?
  • 带空字段的AngularJS orderby(AngularJS orderby with empty field)
    问题 我正在订购我的数据,并且其工作正常,但某些字段为空或没有值。 订购时,这些空字段首先出现。 例如,当订购数字时,我们将在获得“ 0”值之前得到一个巨大的空列表。 我这样做是这样的: ng-click="predicate = 'name'; reverse=!reverse" 和 ng-repeat="name in names | orderBy:predicate:reverse" JSFiddle:http://jsfiddle.net/JZuCX/1/ 有没有简单而优雅的方法可以解决此问题? 无论什么情况,我都希望空白字段排在最后。 回答1 我将编写一个过滤器,该过滤器从有序数组中获取名称为空的项目,并将其放置在末尾: <li ng-repeat="item in (items|orderBy:'name'|emptyToEnd:'name')">{{item.name}}</li> 代码可能看起来像这样: .filter("emptyToEnd", function () { return function (array, key) { if(!angular.isArray(array)) return; var present = array.filter(function (item) { return item[key]; }); var empty =
  • 带有日期字符串的角度 orderBy(Angular orderBy with date string)
    问题 我正在尝试按日期(在本例中为我的数据库中的“开始”日期)对我的 Web 应用程序中的事件进行排序。 我遇到了日期排序不正确的问题。 我相信他们是按字母数字排序而不是按日期排序,因为我的“开始”字段是一个字符串。 我的问题是,如何最好地将此字段转换为日期以进行正确排序? 相关代码如下: html: <div ng-repeat="event in events | orderBy:'start'">{{event.city}}</div> 角度控制器: angular.module('MainCtrl', []).controller('MainController', function($scope, $routeParams, Events) { // pull empty event details from API based on routeParams to get all events $scope.id = ''; Events.get($scope.id).success(function(response) { $scope.events = response; }); }); 示例数据库对象: { "_id": { "$oid": "54978d87ac1e3caaeee8452c" }, "event": "New Years Eve - Times
  • 谓词数组的角度`orderBy`过滤器问题(Angular `orderBy` filter issue with predicate array)
    问题 似乎 angular orderBy 过滤器存在问题,或者我缺少一些我想通过多个属性排序的东西,因此将所有属性作为字符串数组传递,前面有+或-字符串。 我有一个方法getPredicate() ,它解析filterObject并创建谓词数组( filterObject键)。 基于filterObject中每个键的值,它在每个谓词之前加上+或-符号。 (由于对象属性是动态的,并且很可能属性名称之间包含空格,例如Updated Date因此有必要用'将它们括起来)似乎排序不准确。 初始谓词看起来像["'name'", "'-Updated Date'"] 。 这是我分叉的Plunker。 回答1 对于有类似问题的人的解决方案, 您必须在' (single quote)之前添加-或+号前缀才能使其工作,我遇到了问题,因为我试图在' (single quote)之后添加-或+号前缀-因此控制台打印的数组看起来像["+'name'", "-'Updated Date'", "-'city'"]并且它完美地工作。 工作Plunker
  • OrderBy管道问题(OrderBy pipe issue)
    问题 我无法将此代码从Angualr 1转换为Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" 这是我在蒂埃里·坦佩利(Thierry Templier)的回答之后所做的: 组件模板: *ngFor="#todo of todos | sort" 组件代码: @Component({ selector: 'my-app', templateUrl: "./app/todo-list.component.html", providers: [TodoService], pipes: [ TodosSortPipe ] }) 管道代码: import { Pipe } from "angular2/core"; import {Todo} from './todo'; @Pipe({ name: "sort" }) export class TodosSortPipe { transform(array: Array<Todo>, args: string): Array<Todo> { array.sort((a: any, b: any) => { if (a < b) { return -1; } else if (a > b) { return 1; } else { return 0; } })
  • 通过Angular中的多个字段(orderBy multiple fields in Angular)
    问题 如何在角度同时使用多个字段进行排序? 例如,先按组再按子组 $scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1}, {'group':2,'sub':11}]; 我想显示为 组:子组 1-1 1-2 1-20 2-1 2-10 2-11 <select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" /> 回答1 请看这个: http://jsfiddle.net/JSWorld/Hp4W7/32/ <div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div> 回答2 如果要对控制器内部的多个字段进行排序,请使用此 $filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']); 另请参阅https:/
  • 按翻译后的值对ng-options进行排序(Sort ng-options by translated values)
    问题 使用angular-translate转换选择选项真的很容易: <select name="languageId" ng-options="p.id as ('LANGUAGE.'+p.id)|translate for p in Const.languages | orderBy:'name'"> 但是这样,选项按其原始键而不是其翻译后的键排序。 有没有一种方法可以让我的列表按其转换后的值排序,而无需在控制器中预先准备该列表? 回答1 对我有用的最简单方法(角度1.2.24和角度平移2.14.0): <select name="nationality" ng-model="person.nationality" ng-options="c.id as c.name | translate for c in Const.countries | orderBy:'name | translate' "> 这归功于该评论的作者:https://github.com/angular-translate/angular-translate/issues/1064#issuecomment-267357441 回答2 您可以向orderBy提供谓词函数,并使该函数返回转换后的值。 这意味着您还必须将$filter服务传递给控制器​​,因为您需要在JS代码内部调用translate 。
  • 如何在 Firebase 和 Angular 中获取特定元素和 orderby 优先级(How to get specific element and orderby priority in Firebase and Angular)
    问题 我有一个像这样的 firebase 参考: $scope.lessons = $firebaseArray(firebase.child('Lessons').orderByChild('courseID').equalTo($state.params.courseID)); 我正在输出这样的课程: <ul> <li class="lesson" ng-if="lesson.moduleID == module.$id" ng-repeat="lesson in lessons" lessonid="{{lesson.$id}}"> <lessonedit></lessonedit> </li> </ul> 我需要按优先级对课程进行排序,但是当我将 orderByPriority() 函数添加到 firebase 引用的末尾时,它说我只能使用一个 orderBy 调用。 我在lesson in lessons | orderByPriority尝试了过滤器lesson in lessons | orderByPriority lesson in lessons | orderByPriority但它说过滤器不存在? 回答1 如果Priority是课程的一个属性,您可以像这样使用角度过滤器 orderBy: <ul> <li class="lesson" ng-if=
  • 为什么angular 2“过滤器”被称为“管道”?(Why angular 2 “Filters” are called “Pipe”?)
    问题 在 Angular 1 中,当我们想要格式化一个表达式的值以显示给用户时,我们使用了角度过滤器。 在 Angular 2 中,我们同样使用 Pipe。 角度 1 过滤器: HTML: <p> {{ greetings | reverse }}</p> JS: app.filter('reverse', function() { return function(input, uppercase) { input = input || ''; var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; }); 角度2 : HTML: <p> {{ greetings | reverse }}</p> 打字稿: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'reverse'}) export class ReversePipe { transform(input:string)
  • 角度js中的排序日期(Sorting date in angular js)
    问题 我想在 angular js 中对日期进行排序 我正在使用 orderBy:predicate :reverse 例如 <div class="list" ng-repeat="user in Stores| orderBy:predicate:reverse"> 我的js有以下 $scope.predicate = 'date'; $scope.reverse = true; $scope.order = function (predicate) { $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false; $scope.predicate = predicate; } My HTML for sorting date is <div class="col-xs-3 col-lg-3 heading-date headerStyle"> <b class="date-heading" ng-click="order('CreatedDate')">Date</b> <span class="sortorder" ng-show="predicate === 'CreatedDate'" ng-class="{reverse:reverse}"></span>