四、UI-Grid i18n

最新推荐文章于 2024-06-14 09:45:39 发布

西柚叨叨

最新推荐文章于 2024-06-14 09:45:39 发布

阅读量1.4k

点赞数

分类专栏： angularjs ui-grid中文api 文章标签： angularjs 语言

原文链接：https://xiyoudaodao.gitee.io/ui-grid/ui-grid-i18n/

版权

angularjs ui-grid中文api 专栏收录该内容

35 篇文章 11 订阅

订阅专栏

原文：104 i18n
UI-Grid可以使用 i18nService更改默认语言、添加翻译或更改现有的翻译。

设置语言的最简单的方法是将表格放在 ui-i18n指令的div内。

<div ui-i18n="{{lang}}">

页面内只能运行一个ui-i18n指令。当前的语言设置存储在 i18n service（Singleton）中，所以目前还没有办法在单个APP上应用一种以上的语言。

i18nService.setCurrentLang('fr');

使用angular-translate翻译头部标题的例子可以参照http://plnkr.co/edit/KnrKTst5dWXvlZNeIy9c?p=preview

代码：
index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <select ng-model="lang" ng-options="l for l in langs"></select><br>
    
      <div ui-i18n="{{lang}}">
         <p>Using attribute:</p>
         <p ui-t="groupPanel.description"></p>
         <br/>
         <p>Using Filter:</p>
         <p>{{"groupPanel.description" | t}}</p>
    
         <p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. </p>
    
         <div ui-grid="gridOptions" class="grid"></div>
      </div>
    
    </div>
  </body>
</html>

mian.css

.grid {
  width: 500px;
  height: 250px;
}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', 'i18nService', '$http', function ($scope, i18nService, $http) {
  $scope.langs = i18nService.getAllLangs();
  $scope.lang = 'nl';
 
  $scope.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableFiltering: false  }
    ]
  };
 
  $http.get('/data/100.json')
  .success(function(data) {
    $scope.gridOptions.data = data;
  });
}]);

Demo
这里写图片描述