orderBy在这个问题中使用随机排序技术在AngularJS 1.1中运行良好.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
$scope.random = function() {
return 0.5 - Math.random();
}
}
Run Code Online (Sandbox Code Playgroud)
但是在1.2中,它会将infdig错误放入控制台并花费更长的时间来返回排序结果:http: //jsfiddle.net/mblase75/jVs27/
控制台中的错误如下所示:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 42; oldVal: 36"],["fn: $watchCollectionWatch; newVal: 47; oldVal: 42"],["fn: $watchCollectionWatch; newVal: 54; oldVal: 47"],["fn: $watchCollectionWatch; newVal: 61; oldVal: 54"],["fn: $watchCollectionWatch; newVal: 68; oldVal: 61"]]
Run Code Online (Sandbox Code Playgroud)
获取一个对象数组,每个对象以object.timestamp毫秒为单位,并从最新到最旧排序.
Angular的orderBy似乎没有按正确的顺序排列.以下时间戳按以下顺序排列:
// Nov/16/2014 5:30:PM// Nov/16/2014 5:31:PM// Nov/16/2014 5:51:PM// Nov/16/2014 5:52:PM// Nov/16/2014 1:27:AM正确/期望的顺序显然是:
// Nov/16/2014 5:52:PM// Nov/16/2014 5:51:PM// Nov/16/2014 5:31:PM// Nov/16/2014 5:30:PM// Nov/16/2014 1:27:AM所以它4, 3, 2, 1, 5应该是显而易见的,1, 2, 3, 4, 5
<div class="cardWrapper" ng-repeat="card in cards | orderBy:'timestamp'">
various child …Run Code Online (Sandbox Code Playgroud) 我有一个动态数据模型通过websocket进入,看起来像这样:
var results = [
[
{name:'A'},
{price: 0.00}
],
[
{name:'C'},
{price: 0.00}
],
]
Run Code Online (Sandbox Code Playgroud)
我正在使用我的ng-repeat如下:
ng-repeat="result in results"
Run Code Online (Sandbox Code Playgroud)
每当我需要访问结果数组中的一个数组时,我会:
result[0].name
Run Code Online (Sandbox Code Playgroud)
我遇到的问题是ngRepeat上的orderBy过滤器似乎不允许我这样做:
ng-repeat="result in results | orderBy: result[0].name
Run Code Online (Sandbox Code Playgroud)
也许这是对Angular如何工作的基本误解,但我不明白为什么这不起作用.这是不正确的语法,还是由于我的数据模型是动态的?我应该设置$ scope.$ apply somewhere?
我尝试过引号,并且我已经尝试在最初解析数据的函数中设置谓词,将结果设置为result.name的每个实例,但这也不起作用.
很感谢任何形式的帮助.
multidimensional-array angularjs angularjs-orderby angular-filters
当我在带有自动增量限制的ng-repeat中使用orderBy时,我遇到了问题.当页面加载一些元素时,指令停止工作并停止增加元素限制.
这是html:
<div class="row" id="main">
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
ng-if="!errorDialogActive"
ng-repeat="build in builds.builds.build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id"
ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
id="{{build._id}}"
progressive-loading>
<div class="title-container animate" ><p>{{build._buildTypeId}}</p></div>
<div class="update-container animate col-xs-12">
<time class="time">{{build.buildDate | date : 'dd.MM.yyyy H:mm:s'}} </time>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
这是指令:
return function (scope) {
if (scope.$last) {
$timeout(function () {
console.log('Im the last Displayed, Loading more');
scope.loadMore();
}, 100);
}
};
Run Code Online (Sandbox Code Playgroud)
最后是loadMore函数
$scope.loadMore = function () { …Run Code Online (Sandbox Code Playgroud) 我正在使用md-data-table,并添加了基于列的排序选项。下面,展示了我的html(pug格式)代码:
table(md-table md-row-select multiple='' ng-model='vm.selected' md-progress='promise')
//- columns
thead(md-head class='back-color')
tr(md-row)
th(md-column ng-click='vm.orderingBy(name)')
span Name
th(md-column ng-click='vm.sortingBy(code)')
span Code
//- rows
tbody(md-body)
tr(md-select='record' md-select-id='id' ng-repeat='record in vm.records | orderBy:vm.orderByColumn)
//- name
td(md-cell)
p(ng-hide='vm.columns.edit') {{record.name}}
md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
input(ng-model='record.name' md-select-on-focus)
//- code
td(md-cell)
p(ng-hide='vm.columns.edit') {{record.sorting_code}}
md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
input(ng-model='record.code' md-select-on-focus)
Run Code Online (Sandbox Code Playgroud)
我的AngularJS(Javascript)代码如下所示:
vm.orderByColumn = 'name';
vm.orderingBy = function(ordering) {
vm.orderByColumn = ordering;
}
Run Code Online (Sandbox Code Playgroud)
问题是当表按“代码”排序时,我正在尝试编辑记录的代码,当您更改代码的值时,记录的顺序也会改变。因此,结果非常混乱。我在考虑在编辑模式下是否可以冻结订单。
在初始化视图时,如何只运行一次orderBy过滤器?我不希望我的列表在运行时重新排序.
<li ng-repeat="service in quote.services | orderBy:'index'" ></li>
Run Code Online (Sandbox Code Playgroud) 我正在使用Angular JS和Google Places API来构建网络应用程序。
我有一个ng-repeat,当前正在按“ rating”降序(orderBy:'-rating')排序。因此,它将根据评分从Google Places API JSON文件降序列出x个地点。
但是,没有评级的项目/地点被归为null,这些条目显示在我的ng-repeat提要的顶部。这些没有评分,应该放在Feed的底部吗?
因此,我希望它看起来如何的一个示例是:
<ng-repeat orderBy:'-rating'>
<place rating="5"/>
<place rating="4.2"/>
<place rating="2.8"/>
<place rating="null"/>
<place rating="null"/>
</ng-repeat>
Run Code Online (Sandbox Code Playgroud)
最好的方法是什么?
我正在尝试为angular orderBy指令实现自定义比较器.正如您在代码片段中看到的那样,自定义比较器被忽略(没有从console.log记录),即使它应该根据orderBy的角度文档工作
angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.files = [
{name: 'File1', size: '1.2 Mb'},
{name: 'File2', size: '2.4 Kb'},
{name: 'File3', size: '241 Bytes'},
{name: 'File4', size: '2.0 Mb'},
{name: 'File5', size: '16.1 Kb'}
];
$scope.fileSizeComparator = function(s1, s2) {
// split the size string in nummeric and alphabetic parts
console.log(s1);
console.log(s2);
var s1Splitted = s1.size.split(" ");
var s2Splitted = s2.size.split(" ");
if (s1Splitted[1] === s2Splitted[1]) {
// if size type is the same, compare …Run Code Online (Sandbox Code Playgroud)看起来像AngularJS的$filter("orderBy")工作方式不同Array.prototype.sort.我为这个问题写了一个例子:
模板:
<div ng-app="app" ng-controller="ctrl">
<div>arr1 angular </br>{{ arr1ang }}</div>
<div>arr2 angular </br>{{ arr2ang }}</div>
<div>arr1 js </br>{{ arr1js }}</div>
<div>arr2 js </br>{{ arr2js }}</div>
</div>
Run Code Online (Sandbox Code Playgroud)
控制器:
angular.module('app', []);
function ctrl ($scope, $filter) {
arr1 = [
{value: "AA"},
{value: "AB"},
{value: "aa"},
{value: "ab"}
];
arr2 = [
{value: "d"},
{value: "D"},
{value: "w"},
{value: "e"},
{value: "i"},
{value: "O"},
{value: "o"},
{value: "r"}
];
$scope.arr1ang = $filter('orderBy')(arr1, "value");
$scope.arr2ang = $filter('orderBy')(arr2, "value");
function comp(a,b){ …Run Code Online (Sandbox Code Playgroud) javascript sorting angularjs angularjs-orderby angularjs-filter
是否可以选择在orderBy管道中通过asc/desc更改排序?
数组:
this.testArr = [{name: 'bbb', id: '1'}, {name: 'ccc', id: '2'}, {name: 'aaa', id: '0'}];
Run Code Online (Sandbox Code Playgroud)
在HTML中:
<ul><li *ngFor="let item of testArr | orderBy: 'id' : true"><div>{{item.id}}</div></li></ul>
Run Code Online (Sandbox Code Playgroud)
将'true'替换为'false'/'asc'/'desc'不起作用.所需的输出应为:0,1,2和其他参数:2,1,0.
谢谢.
我有一个具有"类别"属性的对象数组.在我的ng-repeat中,我通过有条件地显示带有类别名称的标题行来创建一个组,如果它与前一个值不同,则使用它items[$index - 1]来检查前一个值.这可行,但如果我应用orderBy过滤器,似乎$ index不反映新订单.我究竟做错了什么?
我不明白为什么我的orderBy过滤器根本不起作用,我查看了每一个奇怪的解决方案,所有的解决方案都指向一个事实,即它是ng-repeat在对象的对象而不是对象数组上运行。但我的是一个对象数组,如下所示:
[Object, Object, Object]
0: Object
$$hashKey: "object:19"
dataLink: ""
id: "633"
name: "My first graph"
order: 1
parentTarget: ""
presenceLink: ""
size: 12
span: 1
subType: 1
type: 1
__proto__: Object
1: Object
$$hashKey: "object:20"
dataLink: ""
id: "634"
name: "My second graph"
order: 2
parentTarget: ""
presenceLink: ""
size: 6
span: 1
subType: 1
type: 3
__proto__: Object
2: Object
$$hashKey: "object:21"
dataLink: ""
id: "635"
name: "My third graph but in front"
order: …Run Code Online (Sandbox Code Playgroud) orderBy 功能不适用于我尝试使用的日期 ng-repeat
在这里,我想对基于的托管进行排序 executedOn
我想排序元素,最新日期应该反映在顶部.
有人能帮我吗
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.details = [
{
"id": 255463,
"orderId": 226433,
"status": 1,
"executedOn": "25/Sep/17",
"executedBy": "Person A",
"executedByDisplay": "Person A",
"cycleId": 4042,
"cycleName": "Cycle A",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "A"
},
{
"id": 255433,
"orderId": 226403,
"status": 1,
"executedOn": "1/Mar/17",
"executedBy": "Person B",
"executedByDisplay": "Person B",
"cycleId": 4041,
"cycleName": "Cycle B",
"versionId": 21289,
"versionName": "Version A",
"issueKey": "B"
},
{
"id": 255432,
"orderId": 226402,
"status": …Run Code Online (Sandbox Code Playgroud)