html - 根据使用 json 选择的语言更改 html 页面的内容

Question

在我的应用程序中，要求用户选择一种语言，基于该语言，应用程序中的所有内容都会更改为该特定语言。我使用 json 数组来获取用户信息，所以我将其存储为，

  {"uniqueId":1238902,
         {
    "english":{
        "username":"Sherif",
        "phone" :(234)567-0988
    },
    "arabic":{
        "name":"شريف",
         "phone": (234)567-0988}}

但是我只能在我的 html 中显示一种语言，

{{"User Name" |translate}}:
    <input type="text" ng-model="editingInfo[0].arabic.name">
    <br>
    {{"Phone"translate}}:
    <input type="number" ng-model="editingInfo[0].arabic.phone">
    <br>
    <button ng-click="save()">

Controller :

//selecting specific user to edit
$scope.editing=function(key){
$scope.editingInfo=[];
for (var i=0; i<$scope.userInfo.length;i++)
{
if($scope.userInfo[i].uniqueId == key.uniqueId){
$scope.editingInfo.push($scope.userInfo[i]);
};
};

那么，我将如何在同一个 html 页面中使用这两种语言。在 html 中调用数据时我犯了什么错误。

Answer 1

解决方案构想

这种情况的最佳解决方案是提供服务来管理我们应用程序中的所有语言问题。这种语言服务应该知道页面上当前设置的是什么语言，并从适当的语言数组中获取文本。

此类服务中的一些示例 getter 应如下所示:

this.getText = function(textSymbol){
 return langTexts[currentChosenLanguageSymbol][textSymbol];
}

示例用法:

someLangService.getText("name");

因此使用该服务的开发者只需要知道文字符号，服务应该提供正确的文字。

---

解决方案示例

我用工作示例创建了工作服务:

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

app.service("lang", function(){

  //possible to choose langs
  var langs=[
    {label:"English", symbol:"english", id:1},
    {label:"Arabic", symbol:"arabic", id:2}
  ];
  
  
  //object contains lang texts used in app
  var texts={
    "english":{
        "name":"Sherif",
        "phone" :"(234)567-0988"
    },
    "arabic":{
        "name":"شريف",
        "phone": "(234)567-0988"
    }
    };
  
  
  this.getLangueges = function(){
    return langs;    
  };
  
  this.setLanguage = function(lang){
    this.language=lang;
  };
  
  this.getLanguage = function(){
    return this.language;  
  };
  
  this.getText = function(symbol){
    return texts[this.language.symbol][symbol];
  };
  
  //set default as english
  this.setLanguage(langs[0]);
  
});

app.controller('controller', function(lang, $scope){
  
  //set service into view
  $scope.lang = lang;
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">

  <select ng-options="lang as lang.label for lang in lang.getLangueges() track by lang.id" ng-model="lang.language" ></select>
  
  <h3>{{lang.getText("name")}}</h3>
</div>

更多注意事项 - 我稍微更改了存储语言文本的格式，问题中粘贴的结构在不同语言中有不同的键，我们需要具有不同值的相同键。

感谢这项服务，我们不需要直接使用数组，但它为此提供了抽象级别，使用它我们可以只提供文本符号，服务将获得具有当前所选语言的正确文本。

希望对您有所帮助。