49

I wanted to know if I can split a string simply in angularJS. I have my

 $scope.test = "test1,test2";

in my controller and in my view, I wanted to do something like that

{{test[0] | split(',')}}
{{test[1] | split(',')}}

I've seen a lot thing about input and ng-change calling a function in the controller that split the string or something with ng-list but nothing works in my case.

thx to all.

KeizerBridge
  • 2,707
  • 7
  • 24
  • 37
  • what should the `{{}}` expression output as the result of the split? `{{}}` expressions are treated as strings, while i'm guessing you want `split` to return an array – Raibaz Jul 03 '13 at 12:35
  • 2
    Can't you use plain JavaScript to split the String? http://www.w3schools.com/jsref/jsref_split.asp – Lukas K. Jul 03 '13 at 12:36
  • [better article on String.split](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), sorry Lukas. – rlemon Jul 03 '13 at 13:23

5 Answers5

94

You may want to wrap that functionality up into a filter, this way you don't have to put the mySplit function in all of your controllers. For example

angular.module('myModule', [])
    .filter('split', function() {
        return function(input, splitChar, splitIndex) {
            // do some bounds checking here to ensure it has that index
            return input.split(splitChar)[splitIndex];
        }
    });

From here, you can use a filter as you originally intended

{{test | split:',':0}}
{{test | split:',':0}}

More info at http://docs.angularjs.org/guide/filter (thanks ross)

Plunkr @ http://plnkr.co/edit/NA4UeL

leon.io
  • 2,779
  • 1
  • 18
  • 26
  • 7
    The arguments need to be passed ':'-delimited: `{{ expression | filter:argument1:argument2:... }}`, so in this case: `{{test | split:",":0 }}`. [New docs](http://docs.angularjs.org/guide/filter). I'm guessing this changed sometime in the past 6 months – ross Dec 28 '13 at 17:34
50

Thx guys, I finally found the solution, a really basic one.. In my controller I have 

$scope.mySplit = function(string, nb) {
    var array = string.split(',');
    return array[nb];
}

and in my view

{{mySplit(string,0)}}
KeizerBridge
  • 2,707
  • 7
  • 24
  • 37
36

You can try something like this:

$scope.test = "test1,test2";
{{test.split(',')[0]}}

now you will get "test1" while you try {{test.split(',')[0]}}

and you will get "test2" while you try {{test.split(',')[1]}}

here is my plnkr:

http://plnkr.co/edit/jaXOrZX9UO9kmdRMImdN?p=preview

jwpfox
  • 5,124
  • 11
  • 45
  • 42
Mohideen bin Mohammed
  • 18,813
  • 10
  • 112
  • 118
2

You could try this:

$scope.testdata = [{ 'name': 'name,id' }, {'name':'someName,someId'}]
$scope.array= [];
angular.forEach($scope.testdata, function (value, key) {
    $scope.array.push({ 'name': value.name.split(',')[0], 'id': value.name.split(',')[1] });
});
console.log($scope.array)

This way you can save the data for later use and acces it by using an ng-repeat like this:

<div ng-repeat="item in array">{{item.name}}{{item.id}}</div>


I hope this helped someone,
Plunker link: here
All credits go to @jwpfox and @Mohideen ibn Mohammed from the answer above.

Selene Blok
  • 154
  • 2
  • 9
0

The Easiest one for AngularJS

{{test.split('T')[0]}}

Pankajan05
  • 166
  • 1
  • 9