Question

在角度我有一个简单的下拉菜单来设置数据格式。
为了学习angularJS数据绑定，我想截取控制器中的选定值，并在$ filter（'date'）内使用它来根据所选格式更改显示日期。

下面是HTML和控制器代码：

<select ng-model="selector">
   <option value="dd/MM/yyyy">Euro</option>
   <option value="MM/dd/yyyy">USA</option>
   <option value="yyyy/MM/dd">JPN</option>
</select>
<span>
     Formatted Date: {{ formattedDate }}
</span>


$scope.selector = 'MM/dd/yyyy';
var nowDate = new Date();
$scope.formattedDate = $filter('date')(nowDate, $scope.selector);

通过从下拉列表中选择一个新值，选择器变量设置正确，但formattedDate不会更改，但仍保持初始化为第一个值。

通过在HTML中使用角度过滤器，它可以正常工作：

{{ nowDate | date : selector}}

Answer 1

观看方式

在$watch更改

上添加selector到过滤器

$scope.$watch(function () {
  return $scope.selector;
 },
  function (newValue, oldValue) {
    $scope.formattedDate = $filter('date')(nowDate, newValue);
 });

Fiddle

中的演示1

ng-chage way

将ng-chage指令设为<select>

$scope.fireFilter = function(){
    $scope.formattedDate = $filter('date')(nowDate, $scope.selector);
}

HTML 的

<select ng-model="selector" ng-change="fireFilter()">

Fiddle

中的演示2

为了获得更好的性能，我会使用ng-chage方式

$ filter（＆＃39; date＆＃39;）在控制器中使用$ scope变量格式时不更新格式

1 个答案:

观看方式

ng-chage way