logo标签列表

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

javascriptangularjsjson
4

我有一个json文件如下：

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

这只是一个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>

现在我想从键值中删除下划线并用空格替换它。我该怎么做呢？

我尝试了 {{key.replace('_',' ')}}。但它只删除第一个下划线，而不是所有的下划线。

请使用过滤器，仅返回翻译的文本。 - Hadi J
4个回答
4

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>

尝试这个。使用类似于这样的过滤器。
 app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

在HTML中

   {{key | removeUnderscores}}
@Gopal Chandak，请看我的回答。 - Hadi J
3

看起来你忘了使用全局修饰符，试试这个：

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

使用 "g" 可以替换所有出现的字符。

不，它不起作用。我们不能在这里使用正则表达式。我尝试过了。 - Gopal Chandak
为什么不能使用正则表达式？ - frontend_dev
请查看georgeawg提供的答案。 - Gopal Chandak
有趣。解决方案仍然使用正则表达式。 - frontend_dev
是的，它被使用了。但是正则表达式已经在控制器中使用而不是作用域中。我们不能在作用域中使用正则表达式。 - Gopal Chandak
2
AngularJS文档明确指出，Angular表达式不包括正则表达式。
“Angular表达式与JavaScript表达式的区别”中提到：
- 不支持使用字面量符号创建正则表达式。
请参考AngularJS开发人员指南 - 表达式。建议使用自定义过滤器，如@hadijz所推荐。
app.filter('removeUnderscores', [function() {
return function(string) {
    if (!angular.isString(string)) {
        return string;
    }
    return string.replace(/[/_/]/g, ' ');
 };
}])

and in html

{{key | removeUnderscores}}
0
只是一个问题。为什么不在服务中处理json文件/数据？这样的处理（特别是字符串替换）不应该在AngularJS的HTML或控制器中完成。 我建议您在服务内解析json，然后将其传递给控制器。那通常是最佳实践。 请参考JSBIN。谢谢。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接