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");

因此，使用此服务的开发人员只需要知道单词符号，服务就应该提供正确的单词。

解决方案示例

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

＆＃13;

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;
  
});

＆＃13;

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

＆＃13;

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

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

我希望这会有所帮助。

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

1 个答案:

解决方案构想

解决方案示例