angularjs - 拆分为 ng 重复项目？

Question

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

$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 的表达式中我能做什么。

Answer 1

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

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

工作得很好。

JSBin为证！

Answer 2

右边的字符串|被解析为过滤器的名称（通常它们是字符串格式化过滤器，但角度团队也提供了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:,">

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

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

Answer 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">