ng-repeat orderBy object 指令用于在AngularJS中对对象数组进行排序和循环。

18 浏览
0 Comments

ng-repeat orderBy object 指令用于在AngularJS中对对象数组进行排序和循环。

更新：

在我的HTML页面中，我使用以下代码：

但问题是我需要按特定顺序使用特定文件，所以有没有办法控制渲染的顺序？

我正在尝试按照对象排序，我在发布之前在线搜索过。

function MyCtrl($scope) {
    $scope.templates = {
        template_address: "../template/address.html",
        template_book: "../template/book.html",
        template_create: "../template/create.html" 
    };
    
    
        
  • {{name}}: {{path}}
    •

http://jsfiddle.net/abuhamzah/6fbpdm9m/

0

3 答案

0 Comments

问题出现的原因：

在ng-repeat orderBy object的问题中，出现了数据格式不符合要求的情况。数据以对象形式存在，而ng-repeat orderBy指令只能处理数组形式的数据。

解决方法：

为了解决这个问题，需要将数据转换成数组形式。可以在数据中添加一个字段来存储原本的键，然后将数据转换为数组。在转换完成后，就可以使用ng-repeat orderBy指令来排序和展示数据了。

具体的解决方法如下：

1. 在数据处理的函数中，先定义一个空对象filtered来存储处理后的数据。

2. 使用_.mapObject函数遍历原始的数据对象，将每个键值对中的键存储到相应的值中。

3. 在遍历过程中，判断某个值的特定字段（例如name）是否满足某个条件（例如等于'test'），如果满足条件，则将该键值对存储到filtered对象中。

4. 使用_.sortBy函数对filtered对象进行排序，将排序后的结果返回。

最终的解决方案如下：

filter = function(items){
  filtered={};
  _.mapObject(items,function(V,K){  
    V.key = K; // 在数据中添加键
    if(V.name = 'test'){filtered[K]=V;};
  });
  return _.sortBy(filtered,'anyFieldSortCoudBeThe KEY it self'); // 使用键来排序并返回数组
};

通过以上的处理，就可以将原本以对象形式存在的数据转换为数组形式，并使用ng-repeat orderBy指令进行排序和展示了。

0
0 Comments

ng-repeat orderBy object是一个常见的问题，它的出现原因是ng-repeat指令在遍历对象时默认是按照对象的属性名进行排序，而不是按照属性值进行排序。因此，如果想要按照属性值进行排序，就需要自定义一个过滤器来实现。

上述代码是一个自定义的过滤器orderObjectBy，它的作用是按照指定的属性prop对对象filterObj进行排序。具体的实现步骤如下：

1. 首先，将对象的属性和值分别存储在一个数组中，以便后续排序操作。这里使用了loadash库的forEach函数来遍历对象的属性和值，并将它们存储在数组arr中。

2. 接下来，使用loadash库的sortBy函数对数组arr进行排序，排序的依据是属性值的prop属性。

3. 然后，使用for循环遍历对象filterObj的属性，并将其删除。

4. 最后，使用for...of循环和数组sortedArr的数据，重新将属性和值添加回对象filterObj中。

最后，将排序后的对象filterObj返回即可。

通过以上步骤，我们可以实现按照对象的属性值进行排序的功能。在使用ng-repeat指令时，可以将该过滤器应用到ng-repeat的orderBy参数中，即可按照属性值进行排序。

以上就是解决ng-repeat orderBy object问题的方法，通过自定义过滤器来实现按照对象属性值进行排序。希望对你有所帮助。

0
0 Comments

在这段代码中，出现了一个问题：无法将过滤器应用于一个普通对象，只能应用于数组。为了解决这个问题，可以在控制器中定义一个方法，将对象转换为数组，然后对数组进行过滤。具体代码如下：

$scope.templatesAry = function () {
    var ary = [];
    angular.forEach($scope.templates, function (val, key) {
        ary.push({key: key, val: val});
    });
    return ary;
};

然后可以对这个方法返回的数组进行过滤，代码如下：

  • 
    {{prop.key}}: {{prop.val}}

    •

    这样就可以对对象进行排序和过滤了。在这个例子中，可以看到这种方法是起作用的。但是如果尝试在`ng-include`中使用`ary.val`，会发现`ng-include`不起作用。

    如果遇到类似的问题，可以尝试将代码缓存起来，以避免无限循环的问题。另外，在遍历对象时，可以使用标准的`for...in`语法，代码更加简洁：

    for (const key in $scope.templates) {
    ary.push({key: key, val: $scope.templates[key]});
}

    但是需要注意的是，不要使用这种解决方案，否则可能会导致无限循环的问题。可以参考相关文档了解更多详情。

    最后，如果在控制台中出现`10 $digest() iterations reached. Aborting!`的错误，说明代码中出现了无限循环的问题。

    0