逗号分隔<p>角度</p>

时间:2013-05-21 15:12:05

标签: angularjs

我有一个非常基本的场景(有点新的角度)。我正在尝试转换JSON:

[
    {'name': 'Nick'},
    {'name': 'David'},
    {'name': 'John'},
]

要:

<p>Nick,David,John</p>

但我无法弄清楚如何生成单个“p”。你如何在<p>

中调用ng-repeat
<p ng-repeat="item in menuItems">{{item.name}}</p>

7 个答案:

答案 0 :(得分:16)

有一件事有用的是创建一个“地图”过滤器,如下所示:

myModule.filter('map', function() {
  return function(input, propName) {
    return input.map(function(item) {
      return item[propName];
    });
  };
});

这是映射到命名属性的简单情况,你可以使它更加花哨并理解点符号等。现在有了这个,在你的视图中你可以做到:

<p>
  {{(menuItems | map:'name').join(',')}}
</p>

因为地图过滤器返回一个数组,该数组在Javascript中已经有一个内置的连接方法。

答案 1 :(得分:3)

你不能这样做。相反,请使用mapjoin。例如:

<p>{{names}}</p>

$scope.menuItems = [
  {'name': 'Nick'},
  {'name': 'David'},
  {'name': 'John'},
];
$scope.$watch('menuItems', function(menuItems) { 
    $scope.names = menuItems.map(function(item) { return item.name }).join(',');
});

这将$watch menuItems并在names更改时更新$scope的{​​{1}}属性。

答案 2 :(得分:0)

我不确定它可能...... How to use ng-repeat without an html element

但你总能这样做:

<p>
    <span ng-repeat="item in menuItems">{{item.name}},</span>
</p>

答案 3 :(得分:0)

这是另一种使用过滤器更易维护的方法:

app.filter('commaSeparated', function () {
    return function(input, property) {
        var csv = '';
        for (var i = 0; i < input.length; i++) {
            csv += input[i][property];
            if (i < input.length - 1) {
                csv += ',';
            }
        }
        return csv;
    };
});

显然,你可以用$ scope.menuItems替换文字数组......

<p>
    {{ [ {'name': 'Nick'}, {'name': 'David'}, {'name': 'John'} ] | commaSeparated:'name' }}
</p>

答案 4 :(得分:0)

我喜欢地图过滤器的想法。这很酷。对于较少的代码,请尝试this回答。跳过name媒体资源和ng-repeat,然后使用join() function

<p>{{people.join(', ')}}</p>

不幸的是,这不起作用:

<p>{{people.map(function(item){return item.name;}).join(', ')}}</p>

答案 5 :(得分:0)

如果您可以使用<span>代替<p>,那么请关注以下对象:

[
      { "name": "John" },
      { "name": "David" },
      { "name": "Gopal" },
      { "name": "Anil" },
      { "name": "Gurjeet" }
]

可以显示为:John,David,Gopal,Anil和Gurjeet

使用此代码段:

<span ng-repeat="admin in data">{{$first ? '' : $last ? ' and ' : ', '}}{{admin.name}}</span>

AngularJS ng-repeat, comma separated with 'and' before the last item

获得此解决方案

谢谢!

答案 6 :(得分:0)

你也可以这样做:

<p>    
   <span ng-repeat="(item,name) in menuItems">{{name}}{{$last ? '' : ', '}} </span>
</p>

我在类似的问题上使用了这种方法,我尝试永远不要混合javascript / jquery和angular。从这里得到解决方案: Using comma as list separator with AngularJS