如何从json键值中删除下划线

I have a json file like

我有一个json文件

{
"Asian_Cities_Countries":[
{"name":"Beijing",
"country":"China"
},
{"name":"Ankara",
"country":"Turkey"
}
],
"European_Cities_Countries":[
{"name":"Paris",
"country":"France"
},
{"name":"Madrid",
"country":"Spain"
}
]
}

It is just a part of a json file the actual json is quite big. I am fetching this json through angularjs and displaying it my html page as

它只是json文件的一部分,实际的json非常大。我通过angularjs获取此json并将其显​​示为我的html页面

    <div class="panel-group" id="accordion">
            <div ng-repeat="key in notSorted(items) track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
            <a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
                <div class="panel-heading panel-types">
                    <h4 class="panel-title">
                    {{key}}
  </h4>
                </div></a>
                <div id="{{key}}" class="panel-collapse collapsing menu-items">
                    <div ng-repeat="item in value">
                        <div class="row">
                            <div class="col-sm-12 col-lg-3">
                                <p class="item-name">
                                {{item.name}}
                                </p>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <p>{{item.country}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Now I want to remove underscores from the key value and replace it with blank spaces.How do i do it.

现在我想从键值中删除下划线并将其替换为空格。我该怎么做。

I tried {{key.replace('_',' ')}} . But it removes only the first underscore and not all of them.

我试过{{key.replace('_','')}}。但它只删除了第一个下划线而不是全部。

4 个解决方案

#1

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

app.controller("ctrl" , function($scope){
  $scope.items = {
     "Asian_Cities_Countries":
           [
             {"name":"Beijing","country":"China"},
             {"name":"Ankara","country":"Turkey"}
           ],
      "European_Cities_Countries":
          [
             {"name":"Paris","country":"France"},
             {"name":"Madrid","country":"Spain"}
          ]
 };
  
  });

app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
            <div ng-repeat="(key,value) in items track by $index" class="panel panel-default menu-panel" ng-init="value = items[key]" style="margin-bottom:10px;">
            <a data-toggle="collapse" data-parent="#accordion" id="menu-link" href="#{{key}}">
                <div class="panel-heading panel-types">
                    <h4 class="panel-title">
                    {{key | removeUnderscores}}
  </h4>
                </div></a>
                <div id="{{key}}" class="panel-collapse collapsing menu-items">
                    <div ng-repeat="item in value">
                        <div class="row">
                            <div class="col-sm-12 col-lg-3">
                                <p class="item-name">
                                {{item.name}}
                                </p>
                            </div>
                            <div class="col-sm-12 col-lg-3">
                                <p>{{item.country}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

try this. use a filter similar this

尝试这个。使用类似的过滤器

 app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

and in html

并在HTML中

   {{key | removeUnderscores}}

#2

Seems you forgot the global modifier, try this:

似乎你忘记了全局修饰符,试试这个:

key.replace(/_/g,' ')

with "g" all occurences should be replaced

用“g”表示应该更换所有出现的内容

#3

The AngularJS Docs specifically state that Angular Expressions don't include regular expressions.

AngularJS Docs明确指出Angular Expressions不包含正则表达式。

Angular Expressions vs. JavaScript Expressions

Angular expressions are like JavaScript expressions with the following differences:

Angular表达式就像JavaScript表达式,但有以下不同之处:

• No RegExp Creation With Literal Notation: You cannot create regular expressions in an Angular expression.

没有使用文字表示法创建RegExp:您无法在Angular表达式中创建正则表达式。

-- AngularJS Developer Guide - Expressions

- AngularJS开发人员指南 - 表达式

Instead use a custom filter as recommended by @hadijz

而是使用@hadijz推荐的自定义过滤器

app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

and in html

并在HTML中

{{key | removeUnderscores}}

#4

Just a question. Why aren't you processing the json file/data within a service? This much processing (especially string replacing) isn't meant to be done in either the HTML or the controller in AngularJS. I'd recommend that you parse the json inside a service and then pass it to the controller. That's usually the best practice..

就一个问题。为什么不在服务中处理json文件/数据?这种处理(尤其是字符串替换)并不是要在AngularJS中的HTML或控制器中完成。我建议您解析服务中的json,然后将其传递给控制器​​。这通常是最好的做法..

Please see this JSBIN for reference. Thank you

请参阅此JSBIN以供参考。谢谢