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.

3
  • 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 Commented Jul 3, 2013 at 12:35
  • 2
    Can't you use plain JavaScript to split the String? w3schools.com/jsref/jsref_split.asp Commented Jul 3, 2013 at 12:36
  • better article on String.split, sorry Lukas. Commented Jul 3, 2013 at 13:23

5 Answers 5

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

Sign up to request clarification or add additional context in comments.

1 Comment

The arguments need to be passed ':'-delimited: {{ expression | filter:argument1:argument2:... }}, so in this case: {{test | split:",":0 }}. New docs. I'm guessing this changed sometime in the past 6 months
51

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)}}

3 Comments

Congratulations on finding a solution by yourself. You should consider to accecpt your own answer.
this would be better handled by creating a custom filter - docs.angularjs.org/guide/filter
It's better to use a filter, like in the above answer
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

3 Comments

It's pretty clear veljasije. Instead of using directive or function he used the split method for the string object directly in the view. KISS.
@veljasije just go and the link , i did it clearly on plunkr plnkr.co/edit/jaXOrZX9UO9kmdRMImdN?p=preview
Now I feel dumb googling for it :-)
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.

Comments

0

The Easiest one for AngularJS

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.