リピートキー値のペアを繰り返しているところで、スペースなしでキーを表示しています。ng-repeatにスペースが含まれているキー名を表示
私のNGリピート：
ng-repeat="(key, value) in scenariosViewAll.collectionBookObject"
私はスパンで表示しています：
コントローラで<span class="accordion-title">
{{key}}
</span>
私のように配列をプッシュしています：
vm.shared.collectionFlyoutObject.BusinessDrivers.push(data);
そのが正常に動作して表示しますBusinessDriversとしてのキー。 しかし、私はビジネスドライバーとして表示する必要があります。
何らかの理由で現在のキーで作業し、必要なスペースを追加することができます。 1つの選択肢は、鍵の人間が読める形式のコレクションブックオブジェクトの状態を維持することだけです。
<span class="accordion-title">
{{value.keyView}}
</span>
別のアプローチだけでヒトにキーをマップすることができ、あなたのコントローラ内のマップを維持するために、次のようになります。keyは、これを使用すると、あなたはvalueでそれをアクセスし、keyViewが存在し、そのようなフィールドがないと仮定すると、あなたが望む、読める形式
$scope.keyViews = { };
$scope.keyViews['BusinessDrivers'] = 'Business Drivers';
そして、これを使用して表示します。
<span class="accordion-title">
{{keyViews[key]}}
</span>
しかし、このアプローチは、メンテナンスやその他の理由のために、単一のマップに関連するすべての状態を維持未満いいです。
カスタム関数を使用して、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>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>
で Iは
はこれを試して、私の変更を行うために@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>あなただけのスペースへのキャメルケースから鍵を変換したい場合は、適切な文字列を離れ、その後、私はそれが最も簡単な方法だろうとあなたは、フィルタを使用することをお勧めします。
新しいフィルタを作成して使用するだけです。
コントローラ：
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>
これはあくまでも一例です。これがうまくいくと期待しています:)
それは誰にも役立つので、受け入れられたように答えをマークするように十分親切にしてください:) –
私は上記の答えは少し圧倒していると思います。あなたはそれが「ビジネスドライバー」などになるように抽出した単語を小文字にしたい場合は、
を使用することができます.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(' ')
}
})
ありがとうございます：https://stackoverflow.com/questions/7 225407/convert-camelcasetext-to-camel-case-text – Adelin
どのような例を提供できますか？ – zabusa
これをスペースに変換するフィルタを作成することができます。 – zabusa