Question

我在项目中使用了angular-strap datepicker。不幸的是，我没有找到动态更改区域设置的机会。我需要在每个$localeChangeSuccess重绘日期选择器，但我不知道该怎么做。插件定义了服务$locale引起的语言环境，但它只在init阶段定义了一次。

Answer 1

嗯，遗憾的是angular-strap没有注意$locale次更改。使用特定$locale初始化角带非常有效但是一旦场所改变，角带不会重新渲染他的组件。我可以使用一些技巧，但这个解决方案不是最好的，因为它取决于$timeout和＆＃34;强制渲染东西＆＃34;。请检查fiddle。最好在GitHub上创建一个功能请求，并在$locale更改时重新生成角度带。

视图

<div ng-controller="Ctrl" class="padded">
    <select name="language" 
            ng-model="language" 
            ng-options="k as v for (k, v) in languages" 
            ng-change="changeLanguage(language)"></select>
    <input type="text" class="form-control" 
            ng-if="!someChange" 
            ng-model="myDate" 
            placeholder="Until" bs-datepicker>
    <div class="padded">Selected date: {{ myDate | date:'shortDate'}}</div>
</div>

AngularJS应用程序

angular.module('calendar', [
  'mgcrea.ngStrap.datepicker',
  'tmh.dynamicLocale'
])
.config(function (tmhDynamicLocaleProvider) {
  tmhDynamicLocaleProvider.localeLocationPattern('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/i18n/angular-locale_{{locale}}.js');
})
.controller('Ctrl', function($scope, tmhDynamicLocale, $timeout) {

  $scope.myDate = new Date();
  $scope.someChange = false;
  $scope.language = 'en-gb';
  $scope.languages = {
    'en-us': 'English (USA)',
    'en-gb': 'English (Great Britain)',
    'de-de': 'Deutsh (Deutsh)'
  };


  $scope.changeLanguage = function (language) {

    //set new language
    tmhDynamicLocale.set(language);

    //store selected date 
    var saveDate = angular.copy($scope.myDate);

    $timeout(function () {
      $scope.someChange = true;
      $timeout(function () {
        $scope.someChange = false;
        $scope.myDate = saveDate;
      }, 150);
    }, 150);
  }
});

Answer 2

我尝试使用ng-if解决方案，但是这给我带来了副作用，即在时间选择器中选择了ngModel后，ngModel停止更新。

我想出了另一种在不删除元素的情况下有效的方法：

我给模型一个对象而不是给它一个日期：

==

并像这样更改角度带代码：

转到：

function hundredTwoHundred() { const result = []; for (let i = 100; i <= 200; i++) { if (i % 3 === 0 && i % 4 === 0) { result.push("yes, yes and yes"); } else if (i % 3 === 0) { result.push("yes"); } else if (i % 4 === 0) { result.push("yes and yes") } else { result.push(i) } } return result; } console.log(hundredTwoHundred());行：3774

并从以下位置更改“其他”：

$scope.pickerModel = { date: myDate, language: myLang }

到

controller.$formatters.push(function (modelValue) function...

就是这样！

如何在angular-strap datepicker中更改动态语言？

2 个答案:

视图

AngularJS应用程序