All geek questions in one place

Display key name with spaces in ng-repeat

repeat, where I repeat pairs of key values, I have a key with no spaces, where I need to display with space.

my ng-repeat:

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

I show in between:

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

in the controller, I push the array as:

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

It works great and displays the key as BusinessDrivers. But I need to display as business drivers.

+4
source share
6 answers

, - , . , . , keyView , value, key, :

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

, , , , .

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

:

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

, , .

0

camelCase. , .

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>
Hide result
0
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;
    };
});

.

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

@Vivz, .

.

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>
Hide result
0

camelCase , , , .

.

:

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

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

:

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

. , :) Fiddle

0

, . :

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


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

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

If you want to write lowercase words so that they become "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(' ')
    }
 })
0
source

Source: https://habr.com/ru/post/1691219/

More articles:


All Articles