Display key name with spaces in ng-repeat

Question

repeat where i am repeating key value pairs, I am having key without spaces where i need to display with space.

my ng-repeat:

ng-repeat="(key, value) in scenariosViewAll.collectionBookObject"

i am displaying in span:

<span class="accordion-title">
       {{key}}
 </span>

in controller i am pushing the array as :

 vm.shared.collectionFlyoutObject.BusinessDrivers.push(data);

Its working fine and displaying key as BusinessDrivers. But i need to display as Business Drivers .

Might help: https://stackoverflow.com/questions/7225407/convert-camelcasetext-to-camel-case-text — Adelin, Dec 22 '17 at 06:50

score 0 · Answer 1 · answered Dec 22 '17 at 06:55

You might be able to somehow work with the current key and add spaces to it the way you want. One alternative would be to just maintain state in the collection book object for the human readable form of the key. Assuming such a field keyView existed, then you would access it on the value, not the key, using this:

<span class="accordion-title">
    {{value.keyView}}
</span>

Another approach would be to just maintain a map in your controller which can map the keys to the human readable forms you want, e.g.

$scope.keyViews = { };
$scope.keyViews['BusinessDrivers'] = 'Business Drivers';

And then display using this:

<span class="accordion-title">
    {{keyViews[key]}}
</span>

But this approach is less nice than keeping all the relevant state in a single map, for maintenance and other reasons.

Vivz · Answer 2 · 2017-12-22T07:01:37.247

You can use a custom function to split camelCase. You just have to define the function in your main controller and it can be referenced anywhere in your code.

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

app.controller('ApplicationController', function($scope) {
$scope.splitCamelCase = function(input) {
    if (!input)
        return;
    var j = 0;
    var splitString = "";
    var i = 0;
    for (i = 1; i < input.length; i++) {
        if (input.charAt(i) == input.charAt(i).toUpperCase()) {
            splitString = splitString + " " + input.slice(j, i);
            j = i;
        }
    }
    splitString = splitString + " " + input.slice(j, i);
    return splitString.replace("And", "and").replace("and", " and").substr(1, splitString.length);
};
});

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>

<body>
    <div class="container" ng-controller="ApplicationController">
        <div class="row">
        {{splitCamelCase("BusinessDrivers")}}
       </div>
    </div>
</body>

</html>

score 0 · Answer 3 · answered Dec 22 '17 at 07:00

var app = angular.module('myApp', []);
app.filter('myFormat', function() {
    return function(x) {
        var txt = x.replace(/([A-Z]+)/g, "$1").replace(/([A-Z][a-z])/g, " $1")
        return txt;
    };
});

we can make a filter to create the effect. in template

<span class="accordion-title">
       {{key | myFormat}}
 </span>

score 0 · Answer 4 · answered Dec 22 '17 at 07:30

I am copied the snippet from @Vivz to make my change

try this.

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

app.controller('ApplicationController', function($scope) {
 $scope.splitCamelCase = function(input) {
  return  input.replace(/([A-Z]+)/g, " $1").replace(/([A-Z][a-z])/g, " $1");

 };
});

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
</head>

<body>
    <div class="container" ng-controller="ApplicationController">
        <div class="row">
        {{splitCamelCase("BusinessDrivers")}}
       </div>
    </div>
</body>

</html>

score 0 · Answer 5 · answered Dec 22 '17 at 08:25

If you only want to convert the key from camelCase to a space separated proper string, then I suggest you to use a filter as that would be the easiest way.

You can simply create a new filter and use that.

controller:

var myApp = angular.module('myApp',[]);

myApp.filter('splitCamelCase', function() {
  return function(input) {
    return input.charAt(0).toUpperCase() + input.substr(1).replace(/[A-Z]/g, ' $&');
  }
});

View:

<div ng-controller="MyCtrl">
  {{str | splitCamelCase }}
</div>

This is just an example. Hope this helps :) Fiddle

davidkonrad · Answer 6 · 2017-12-22T11:36:48.500

I think the answers above is a little bit overwhelming. It can all be narrowed down to :

.filter('splitByUppercase', function() {
  return function(input) {
    return input.split(/(?=[A-Z])/).join(' ')
  }
})

Example

<span ng-repeat="t in test">
   {{ t | splitByUppercase }}<br>
</span>

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

If you want to lowercase the extracted words so it becomes "Business drivers" etc you can use

.filter('splitByUppercase', function() {
    return function(input) {
      input = input.split(/(?=[A-Z])/);
      input = input.map(function(s,i) {
        if (i>0) s = s[0].toLowerCase() + s.substring(1)
        return s
      });
      return input.join(' ')
    }
 })

Display key name with spaces in ng-repeat

6 Answers6