Angular.js - Convert string with special characters and numbers into Array and display with ng-repeat

Question

I am new to angular.js and I'm having an issue with converting string into array and displaying it with ng-repeat, so far i got this custom filter from a stackoverflow question and the codes are:

JS:

var app = angular.module('globalModule', [])

    app.controller("SampleController", function($scope){

        $scope.data = "123abc123";
    }); 


    app.filter("spaceBreak", 
        function () {
            return function ( value ) {
                  if( !value.length ) return;
                      return value.split("");   
            }
        });

HTML:

 <body ng-controller="SampleController">
     <h4 id="id_{{$index}}" ng-repeat="value in data | spaceBreak"><span ng-bind="value"></span></h4>
</body>

My problem is, it converts and display properly if it is an alphabet(abc) or a number(123) alone, and if combined (abc123) or (123abc) still good, but if the data is number+alphabet+number (123abc123) it doesnt show anymore in ng-repeat. I am really lost and really need help. Hope someone can lend me an answer.

A little confused... so you would want the string 123abc123 to be split into an array and show up in your ng-repeat as 123, abc, 123? — Bennett Adams
– Bennett Adams, Commented Mar 13, 2016 at 18:23
Nope, I want to split it individually, like 1,2,3,a,b,c,1,2,3 splitting abc123 and 123abc has no issue, but with 123abc123 it doesnt show. i dont know why, same with characters, like !abc! it doesnt show in ng-repeat. — Jed Nocum
– Jed Nocum, Commented Mar 13, 2016 at 18:41

Bennett Adams · Accepted Answer · 2016-03-13 18:50:56Z

2

I think what you are looking for is the track by $index functionality. You code errors out because you have duplicates in your $scope.data. That filter isn't really doing anything for you, so you can just ng-repeat through your $scope.data string.

var app = angular.module('globalModule', [])

app.controller("SampleController", function($scope){

  $scope.data = "123abc123"; 
})

<!DOCTYPE html>
<html ng-app="globalModule">

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="SampleController">
    <h4 id="id_{{$index}}" ng-repeat="value in data track by $index"><span ng-bind="value"></span></h4>
  </body>

</html>

edited Mar 13, 2016 at 18:50

answered Mar 13, 2016 at 18:46

Bennett Adams

1,81815 silver badges17 bronze badges

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

4 Comments

Sunil D. Over a year ago

Nice answer, I didn't know that ng-repeat would iterate over strings too. One question, what is lodash being used for here?

Bennett Adams Over a year ago

Sorry, it's not. I autopilot add it to every snippet, haha. Will remove, thanks.

Sunil D. Over a year ago

Also, for the OP, here is the official Angular explanation of why duplicates in an ng-repeat is a problem.

Jed Nocum Over a year ago

Ohh you save me man! thank you very much! Adding track by $index made it work thank youu

Collectives™ on Stack Overflow

Angular.js - Convert string with special characters and numbers into Array and display with ng-repeat

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related