标签: angularjs-orderby

随机orderBy在AngularJS 1.2中返回'infdig'错误

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)

该文档orderBy …

javascript angularjs angularjs-orderby

5
推荐指数
1
解决办法
3641
查看次数

Angular orderBy:'timestamp'把事情放错了

我想做的事:

获取一个对象数组,每个对象以object.timestamp毫秒为单位,并从最新到最旧排序.

问题:

Angular的orderBy似乎没有按正确的顺序排列.以下时间戳按以下顺序排列:

  1. 1416187808218 - // Nov/16/2014 5:30:PM
  2. 1416187881192 - // Nov/16/2014 5:31:PM
  3. 1416189118263 - // Nov/16/2014 5:51:PM
  4. 1416189138827 - // Nov/16/2014 5:52:PM
  5. 1416130064119 - // Nov/16/2014 1:27:AM

正确/期望的顺序显然是:

  1. 1416189138827 - // Nov/16/2014 5:52:PM
  2. 1416189118263 - // Nov/16/2014 5:51:PM
  3. 1416187881192 - // Nov/16/2014 5:31:PM
  4. 1416187808218 - // Nov/16/2014 5:30:PM
  5. 1416130064119 - // Nov/16/2014 1:27:AM

所以它4, 3, 2, 1, 5应该是显而易见的,1, 2, 3, 4, 5


相关代码:

HTML:

<div class="cardWrapper" ng-repeat="card in cards | orderBy:'timestamp'">
  various child …
Run Code Online (Sandbox Code Playgroud)

javascript arrays sorting angularjs angularjs-orderby

5
推荐指数
1
解决办法
4418
查看次数

在多维数组的ng-repeat上使用orderBy

我有一个动态数据模型通过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

5
推荐指数
1
解决办法
2592
查看次数

OrderBy和渐进式加载AngularJS

当我在带有自动增量限制的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)

javascript angularjs angularjs-ng-repeat angularjs-orderby

5
推荐指数
1
解决办法
404
查看次数

AngularJS:如何在编辑模式下以ng-repeat冻结orderBy

我正在使用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)

问题是当表按“代码”排序时,我正在尝试编辑记录的代码,当您更改代码的值时,记录的顺序也会改变。因此,结果非常混乱。我在考虑在编辑模式下是否可以冻结订单。

html javascript angularjs angularjs-orderby

5
推荐指数
1
解决办法
473
查看次数

contidional orderBy仅在init AngularJS上

在初始化视图时,如何只运行一次orderBy过滤器?我不希望我的列表在运行时重新排序.

<li ng-repeat="service in quote.services | orderBy:'index'" ></li>
Run Code Online (Sandbox Code Playgroud)

javascript angularjs ng-repeat angularjs-orderby

4
推荐指数
1
解决办法
509
查看次数

AngularJS:OrderBy降序(空条目)

我正在使用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)

最好的方法是什么?

javascript angularjs ng-repeat angularjs-orderby

4
推荐指数
1
解决办法
2366
查看次数

为什么角度orderBy自定义比较器不起作用?

我正在尝试为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)

javascript sorting angularjs angularjs-orderby

4
推荐指数
1
解决办法
6466
查看次数

AngularJS $ filter('orderBy')奇怪的排序

看起来像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

3
推荐指数
1
解决办法
1130
查看次数

角度5,orderBy asc/desc

是否可以选择在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.

谢谢.

angularjs-orderby angular5

3
推荐指数
2
解决办法
1万
查看次数

应用orderBy后如何在ng-repeat中获取先前的对象

我有一个具有"类别"属性的对象数组.在我的ng-repeat中,我通过有条件地显示带有类别名称的标题行来创建一个组,如果它与前一个值不同,则使用它items[$index - 1]来检查前一个值.这可行,但如果我应用orderBy过滤器,似乎$ index不反映新订单.我究竟做错了什么?

angularjs angularjs-ng-repeat angularjs-orderby

1
推荐指数
1
解决办法
3378
查看次数

尽管 ng-repeat 对对象数组进行重复,但 AngularJS orderBy 根本不起作用

我不明白为什么我的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)

angularjs angularjs-orderby

1
推荐指数
1
解决办法
1588
查看次数

Angular JS orderBy不与Dates合作

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)

angularjs angularjs-ng-repeat angularjs-orderby

1
推荐指数
1
解决办法
493
查看次数