根据使用 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()">

控制器：

//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>

还有一个注释 - 我改变了一点存储语言文本的格式，粘贴的结构在不同语言中具有不同的键，我们需要相同的键具有不同的值。

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

我希望这会有所帮助。