Как отфильтровать значение модели ng с помощью директивы angularjs?

0

Я прикрепляю элемент даты в шаблоне как

<input type="date" ng-model="experience.date_start" date-ob>

Ng-модель является обязательным значением в виде строки к дате. Для этого мне нужно преобразовать эту строку в объект (новая дата (experience.date_start)). Я пытаюсь достичь этого контекста с помощью директивы, называемой date-ob

.directive('dateOb', function(){
 return {
 require: 'ngModel',
    scope: {},
    link: function(scope, element, attrs, ctrl) {
        ctrl.$parsers.push(function(value) {
            console.log('parser!', value);
            return new Date(value);
        });
        ctrl.$formatters.push(function(value) {
            console.log('formatter!', value);
            return value;
        });
    }       
}
});

Он бросает

Ошибка: [ngModel: datefmt] Ожидается 2014-08-28 чтобы быть датой. Http://errors.angularjs.org/1.4.5/ngModel/datefmt?p0=2014-08-28

Как должен быть код в директиве date-ob для него? Я новичок в.directive, пожалуйста, дайте мне решение с объяснением????..

  • 1
    обновите ваш код директивы.
  • 0
    Вы просмотрели?
Теги:
angularjs-filter
angularjs-scope
angularjs-directive
angularjs-ng-model

2 ответа

2
Лучший ответ

Взгляните на formatters и parsers - они используются для таких вещей. Парсеры изменяют, как значение из представления будет сохранено в модели. В то время как форматирующие элементы изменяют, как значение из модели будет отображаться в представлении.

Используя директиву, вы можете сделать что-то вроде этого:

angular.module('myApp', [])
.directive('wrapperDirective', function(){
  return {
    link: function(scope) {
      scope.experience = {date_start: '2015-01-01'};
    }
  };
})
.directive('dateOb', function(){
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // view --> model (change date to string)
      ngModel.$parsers.push(function(viewValue){
        return viewValue.toISOString();
      });

      // model --> view (change string to date)
      ngModel.$formatters.push(function(modelValue){
        return new Date(modelValue);
      });
    }
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" wrapper-directive>
    <p>Date is: {{experience.date_start}}</p>
    <input type="date" ng-model="experience.date_start" date-ob>  
</div>
Поделиться
  • 0
    выдает ошибку «Ошибка: [ngModel: datefmt] Ожидается, что 2014-08-28 будет датой»
  • 0
    Посмотрите на мой фрагмент, вы можете запустить его напрямую. Может быть, я неправильно понял, чего вы хотели достичь.
Показать ещё 7 комментариев
1

вы можете сделать это. он решил мою проблему.

.directive('dateOb', function(){
 return {
    scope: {
     dateModel :'=ngModel'
    },
    link: function(scope, element, attrs, ctrl) {
        scope.$watch('dateModel',function(n,o){
            if(!n instanceOf Date)
            {
              scope.dateModel = new Date(dateModel);
            }
        });
    }       
}
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню