逗号分隔 角答案

【问题标题】：Comma Separated angular逗号分隔 角
【发布时间】：2013-05-16 10:09:07
【问题描述】：

我有一个非常基本的场景（有点新的角度）。我正在尝试转换 JSON：

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

收件人：

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

但我不知道如何生成单个“p”。 里面怎么叫ng-repeat

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

【问题讨论】：

在$scope中创建一个函数怎么样？

标签： angularjs

【解决方案1】：

你也可以这样做：

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

我在遇到的类似问题上使用了这种方法，我尽量不要混合使用 javascript/jquery 和 angular。从这里得到解决方案： Using comma as list separator with AngularJS

【讨论】：

【解决方案2】：

如果您愿意使用 而不是，那么下面的对象数组，

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

可以显示为：John、David、Gopal、Anil 和 Gurjeet

使用此代码 sn-p:

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

此解决方案来自：AngularJS ng-repeat, comma separated with 'and' before the last item

谢谢！

【讨论】：

【解决方案3】：

我喜欢地图过滤器的想法。这很酷。对于更少的代码，请尝试this 答案。跳过name 属性和ng-repeat 并使用join() function：

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

不幸的是，这不起作用：

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

【讨论】：

【解决方案4】：

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

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>

【讨论】：

【解决方案5】：

有一个有用的方法是创建一个“地图”过滤器，如下所示：

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

这是映射到命名属性的简单案例，你可以让它更花哨并理解点符号等。现在有了这个，在你看来你可以这样做：

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

因为 map 过滤器返回一个 Array，它已经在 Javascript 中内置了 join 方法。

【讨论】：

是的，这是最巧妙的答案

【解决方案6】：

你不能这样做。而是使用map 和join。例如：

<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 并在menuItems 更改时更新$scope 的names 属性。

【讨论】：

我不知道它是否那么简单。我有一个利用服务的“MenuController”，它调用 json 并返回它。现在它被重用了，在一种情况下我想把它弄平。
好的，但我看不出问题所在。 MenuController 可以调用该服务并将结果分配给$scope.menuItems。 $watch 将在menuItems 更改时触发。 $watch 函数不会改变menuItems 的值，所以menuItems 可以随心所欲地重复使用。
我猜你总是在创建一个 csv 版本并将其添加到范围。所以这会起作用。

【解决方案7】：

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

但你总是可以这样做：

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

【讨论】：

之前找不到那个。你如何处理 $last 的情况？（没有尾随逗号）。请不要告诉我使用另一个跨度；）。
我知道了：{{item.name}}{{ !$last && ', ' || '.'}} 
你也可以用另一个跨度这样做:)：{{name.first}},