Question

是否有Angular方式来过滤textbox内显示的数据？

我有textbox显示的日期数据，目前我创建了一个新变量并使用moment js对其进行格式化，我必须在第一个变量上写$scope.$watch()以反映更改在这个例子中它似乎没问题，但是当我将它应用到我的项目时它会减慢它，所以我想知道，是否有相同的角度方法

var app = angular.module('xample', []);
app.controller('MainController', MainController);

function MainController() {
  var vm = this;
  vm.date = moment();
  vm.d2 = vm.date.format('MM/DD/YYYY');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="xample">
  <div ng-controller="MainController as main">
    <p>Real Date</p>
    <input type="text" ng-model="main.date">
    <p>Filtered in controller</p>
    <input type="text" ng-model="main.d2">
  </div>

  <body>

Answer 1

由于模型date和模型d2在控制器内部是分开的，因此您需要使用Angular的$watch侦听器。请记住，您也可以使用date filter component而不是使用moment.js

解析日期对象

var app = angular.module('test', []);
app.controller('MainController', ['$scope', function($scope) {

  $scope.date = moment();
  $scope.d2 = $scope.date.format('MM/DD/YYYY');
  $scope.$watch('date', function(newValue, oldValue) {
    $scope.d2 = moment(newValue).format('MM/DD/YYYY');
  });
}]);

app.controller('SimpleController', ['$scope', function($scope) {
  $scope.date = new Date();
}]);

JSFiddle

在插入文本框之前过滤ng-model

1 个答案: