Question

重复我重复键值对的地方，我有空格的键，我需要用空格显示。

我的重复：

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

我正在展示：

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

在控制器中我将数组推送为：

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

它的工作正常并显示关键字作为BusinessDrivers。但我需要显示为业务驱动因素。

Answer 1

您可能能够以某种方式使用当前键并以您希望的方式添加空格。一种替代方案是仅在密钥的人类可读形式的集合书对象中维护状态。假设存在这样的字段keyView，那么您可以使用以下代码访问value，而不是key：

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

另一种方法是在控制器中维护一个地图，该地图可以将键映射到您想要的人类可读形式，例如。

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

然后使用以下显示：

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

但是出于维护和其他原因，这种方法不如将所有相关状态保存在单个地图中那么好。

Answer 2

您可以使用自定义功能拆分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>

Answer 3

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>

Answer 4

我从@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>

Answer 5

如果您只想将密钥从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

Answer 6

我认为上面的答案有点压倒性。它可以缩小到：

.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

如果您想要将提取的单词小写，以便它变为“业务驱动程序”等，您可以使用

.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(' ')
    }
 })

在ng-repeat中显示带空格的键名

6 个答案: