Могу ли я применить/связать пользовательский фильтр с моделью данных ng? Проблема при привязке пользовательского фильтра к data-ng-model

Я определил пользовательский фильтр для форматирования входного числа в определенном формате, т.е. чч: мм

фильтр

app.filter('formatDuration', function () {
    return function (duration) {
        if (angular.isUndefined(duration) || duration === null || duration.toString().trim() == '') return '';

        var hour = Math.floor(duration / 60);
        var min = duration % 60;
        if (min < 10) {
            min = '0' + min;
        }
        return hour + ':' + min;
    };
});

Однако, если я не могу связать его с моим input type = text field data-ng-model = "myModel". Когда я ввожу что-то в модель данных ng-поля ввода, это не соединяется с моим фильтром.

<input type="text" name="Duration" class="form-control" data-ng-model="{{Duration | formatDuration" />

Но, если я свяжу его со значением, например. value = "{{data-ng-model = Duration | formatDuration}}", чем он соединяется с моим пользовательским фильтром и выполняет необходимое преобразование, но не показывает отформатированное значение внутри поля ввода, вместо этого показывает, что было введено изначально..

<input type="text" name="Duration" class="form-control" data-ng-model="Duration" value="{{Duration | formatDuration}}" />

Итак, у меня есть несколько моментов, которые нужно уточнить

1) Могу ли я связать фильтр клиентов с моделью данных ng? Согласно сайту AngualrJs Да, это должно быть 2) Если да, то где я ошибаюсь?

Возможно, стоит упомянуть, что мое поле ввода находится внутри ng-repeat...


angularjs angular-filters
person immirza    schedule 11.08.2015    source источник
comment
Нет, ты не можешь. Вам нужна комбинация $parser/$formatter. Фильтр является односторонним: он может преобразовать число в строку длительности, но не может проанализировать строку длительности и преобразовать ее в число. Вам нужны оба для ng-model. docs.angularjs.org/api/ng/type/   -  person JB Nizet    schedule 11.08.2015
comment
@ JB Nizet, не могли бы вы поделиться примером или рабочим plnkr, если это возможно? Я никогда не использовал комбинацию $parser/$formatter.   -  person immirza    schedule 11.08.2015

Ответы (1)


arrow_upward
1
arrow_downward

Если подумать... если бы вы применили фильтр к связанной переменной, то она бы форматировалась всякий раз, когда вы что-то вводили. Теперь, если вы наберете «1», вы получите отформатированное значение «0:01». Хорошо, но это снова вызовет фильтр, и вы получите «NaN: NaN».

Вы можете использовать свой собственный фильтр и заставить его работать, например. ng-blur в вашем шаблоне, поэтому фильтрация будет выполняться только один раз.

<input type="text" 
       class="form-control" 
       ng-blur="formatDuration(duration)"
       data-ng-model="duration">

Где formatDuration будет fn

$scope.formatDuration = function(duration) {
  $scope.duration = $filter('formatDuration')(duration);
}
person Mikko Viitala    schedule 11.08.2015
comment
Он связан с моим фильтром. Он преобразует 12 в 0:12, что нормально, и присваивает это значение $scope.duration, но в поле ввода оно остается равным 12. Помните, что в моем случае у меня есть повторитель, поэтому я делаю это в html ‹input type=text class =form-control ng-blur=formatDuration(iteration.duration) data-ng-model=iteration.duration› Итак, где я ошибаюсь? - person immirza; 11.08.2015
comment
@ Mikko Viitala, FYI: это решение не сработает для меня, потому что мне нужно просто показать отформатированное значение, но при отправке отправить исходное значение. - person immirza; 11.08.2015
comment
Тогда вы не сможете заставить его работать с одной ng-моделью и фильтром, если вы не преобразуете значение обратно перед отправкой или не сохраните исходное значение, например, в свойстве iteration.$$duration, и отправите его вместо этого. Но поставьте плункер, и я могу взглянуть на него. - person Mikko Viitala; 11.08.2015