Question

我正在使用AngularJS来显示来自不同服务器的信息。我想过滤结果，以显示＆＃34;生产＆＃34;在任何其他类别之前的类别。

以下是我拥有的数据的结构：

cli: {code: "name",
   development: { type: "development",
                  servers: [array here] },
   production:  { type: "production",
                  servers: [array here] },
   training:    { type: "training",
                  servers: [array here] }
}

我在创建过滤器时首先显示生产服务器，其余部分跟随它。

我当前的HTML是

<tr ng-repeat="server in cli | pdFilter">

我已经尝试创建一个过滤器来将生产服务器卸载到一个数组中，然后推送其余部分，但是当访问过滤器时，我无法访问客户端对象的子节点。这是我的代码：

App.filter('pdFilter', [function () {
    return function (cli) {
        // console.log(cli);
        // This outputs a valid object

        if (!angular.isUndefined(cli)) {
            var tempServers = [];
            for(var server in cli) {
                // console.log(cli[server]);
                // This outputs undefined
                if (angular.equals(server.type.substring(0,1), "p")) {
                    tempServers.unshift(server);
                } else {
                    tempServers.push(server);
                }
            }
            return tempServers;
        } else {
            return cli;
        }
    };
}]);

我假设我的问题是当我在cli中的字段中循环时，但我不确定我的问题在哪里？

由于

Answer 1

您应该先放置所有生产服务器，然后再添加其余的服务器

// list of all server types
var types = Object.keys(cli).filter(function(typeName){ return typeof cli[typeName].servers !== 'undefined'; });

// filter production
types.splice(types.indexOf('production'), 1);

// arrays of servers not in production
var arrays = types.map(function(typeName){ return cli[typeName].servers; });

// final result, concat returns new array
return cli.production.concat.apply(this, arrays);

Answer 2

在这里尝试一下，看看它是否有效：

app.filter('pdFilter', function() {
    return function( items, condition) {

    condition = condition || "production"        

    var filtered = [];

    if(items === undefined){
      return items;
    }

    angular.forEach(items, function(cli) {          
        if(condition === cli.type){
           filtered.unshift(cli);
        } else {
           filtered.push(cli);   
    });

    return filtered;
  };
});

我在过滤器中添加了第二个参数，因此如果以后需要/想要在不同条件下进行过滤，则更容易。然后只是让html看起来像这样：

<tr ng-repeat="server in cli | pdFilter:'production'">

除了这个答案之外，您还可以修改原始对象，使其在列表的开头生成，然后在过滤器中生成所需的结果。

在列出其他对象之前，如何创建过滤器以显示一个对象？

2 个答案: