将数组对象的属性用逗号分隔列出。

15 浏览
0 Comments

将数组对象的属性用逗号分隔列出。

我有一个对象数组，其中包含属性'name'。

我想将所有名称作为字符串列在一个div中，以','分隔。

我用underscore这样做：

{{email.name}}{{$last ? '' : ', '}}

结果：

我是新手, 我也是, 还有我！

如何用angular的方式解决这个问题？

谢谢！

Fiddle: http://jsfiddle.net/UJEnt/

0

2 答案

0 Comments

问题的原因是需要实现类似于CSV的行为，即将一个数组中的对象的属性以逗号分隔的形式输出。

解决方法是使用自定义过滤器filter来实现。在给定的示例中，使用了名为csv的自定义过滤器。

过滤器的代码如下：

myApp.filter('csv', function() {
    return function(values, property_name) {
        var result = '';
        for (var i = 0; i < values.length; i++) {
            var value = values[i];
            if (property_name) {
                value = value[property_name];
            }
            result += value;
            if (i + 1 != values.length) {
                result += ',';
            }
        }
        return result;
    };
});

使用这个过滤器的方式是在HTML中使用双花括号并指定要过滤的数组和属性名：

{{friends | csv:'name'}}

如果处理的是字符串数组，也可以不指定属性名直接使用过滤器：

{{another_string_array | csv}}

以上代码会将数组中的对象的属性以逗号分隔的形式输出。最终的结果可以在给定的示例链接中查看。

0
0 Comments

在这段代码中，出现了一个问题：无法正确地将数组中的对象属性连接起来并以逗号分隔。

这个问题的原因是，在JS代码中定义的AngularJS过滤器函数`concat`中，参数`input`和`field`没有正确地传递给函数。在函数体内，使用了`input.length`和`input[i][field]`来获取数组的长度和对象的属性值，但是`input`和`field`并没有正确地传递进来。

解决这个问题的方法是在JS代码中修改过滤器函数的定义，确保正确地传递参数。可以将过滤器函数定义中的参数改为`function(input, field)`，这样在函数体内就可以正确地使用`input`和`field`了。

下面是修改后的代码：

JS:

angular.module('foo').filter('concat', function() {
    return function(input, field) {
        var result = [];
        for (var i = 0, ii = input.length; i < ii; ++i) {
            result.push(input[i][field]);
        }
        return result.join(', ');
    };
});

HTML:

<span>{{ friends | concat:'name' }}</span>

通过以上的修改，代码中的问题得到了解决。现在，当`concat`过滤器被应用到`friends`数组时，它会正确地将数组中的每个对象的`name`属性连接起来，并以逗号分隔。

0