拆分为 ng 重复项目？答案

【问题标题】：Split for ng repeat item?拆分为 ng 重复项目？
【发布时间】：2017-07-20 21:35:38
【问题描述】：

简单的问题 - 如果我的控制器中有这个：

$scope.somedata = 'Item 1, Item 2'; // set from something else

有没有办法在 ngRepeat 表达式中为我的视图拆分一些数据？比如：

<div ng-repeat="item in somedata | split(',')">{{item}}</div>

这不起作用...

或者我必须这样做

$scope.somedata = 'Item 1, Item 2'; // set from something else
$scope.items = somedata.split(',');

然后

<div ng-repeat="item in items>{{item}}</div>

我想我并没有真正理解我可以在 AngularJS 中的表达式中做什么。

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

我想我来晚了，但为什么不简单地这样做：

<div ng-repeat="item in somedata.split(',')">{{item}}</div>

工作得很好。

JSBin求证据！

【讨论】：

这个答案更容易解决问题；我认为定义过滤器会更容易，但最终这是一个更好的解决方案。不知道它是否是“Angular”的做事方式，但我喜欢它。
最简单的解决方案！这应该是正确的答案

【解决方案2】：

|右边的字符串被解析为一个过滤器的名字（通常是字符串格式化过滤器，但是angular团队也提供了filter过滤器，它返回一个过滤后的数组（有点误导因为两者共享相同的名称）。您可以创建自己的拆分过滤器来完成您想要的：

angular.module('myFilters', []).
  filter('split', function() {
    return function(input, delimiter) {
      var delimiter = delimiter || ',';

      return input.split(delimiter);
    } 
  });

你可以像这样使用过滤器：

<div ng-repeat="item in somedata | split">

或者指定一个分隔符：

<div ng-repeat="item in somedata | split:,">

考虑一下上面的伪代码，因为我还没有测试过。

乐迷：http://plnkr.co/edit/hk6F0Y6p5YAXv6fyXfSz?p=preview

【讨论】：

【解决方案3】：

这里是注释分隔符

angular.module('myFilters', []).
  filter('split', function() {
    return function(input, delimiter) {
      //var delimiter = delimiter || ',';

      return input.split(delimiter);
    } 
  });

您可以像这样使用过滤器：还通过 $index 添加了跟踪以避免由于重复值而导致崩溃

<div ng-repeat="item in somedata | split:',' track by $index">

【讨论】：