Split for ng repeat item?

Deadly 提交于 2020-01-22 18:41:31

问题


Simple question- if I have this in my controller:

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

is there a way to split somedata for my view in a ngRepeat expression? Something like:

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

which doesnt work...

Or do I have to do

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

and then

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

I think I'm not really understanding what I can do in an expression in AngularJS.


回答1:


The string the right of the | is resolved to the name of a filter (usually they are string formatting filters, but the angular team has also provided the filter filter, which returns a filtered array (a bit misleading because the two share the same name). You could create your own split filter to accomplish what you want:

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

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

You could use the filter like so:

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

Or specify a delimiter:

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

Consider the above pseudo-code because I haven't tested it.

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




回答2:


I guess I'm too late, but why not simply do this:

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

works just fine.

JSBin for evidence!




回答3:


commented delimiter here

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

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

You could use the filter like so: also added track by $index to avoid crash due to duplicate values

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


来源:https://stackoverflow.com/questions/19718609/split-for-ng-repeat-item

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!