当JavaScript更新一个输入值时,AngularJS的过滤不起作用

When JavaScript updates an input value, AngularJS filtering doesn't work

本文关键字:AngularJS 不起作用 过滤 输入 一个 更新 JavaScript      更新时间:2023-09-26

我最近几天在尝试用Angular做一些事情,但是我遇到了一个更新问题。

这是我HTML页面的一部分:

<div ng-app="monApp" ng-controller="monControleur">
Date de début : <input type="text" ng-model="date_deb" placeholder="JJ/MM/AAAA" value="" name="date_d" id="champ_date_deb" size="12" maxlength="10">&nbsp;<span id="calendarMainDeb"></span>
<script type="text/javascript">
//<![CDATA[
    calInit("calendarMainDeb", "Calendrier Deb", "champ_date_deb", "jsCalendar", "day", "selectedDay","calendarWrap1");
//]]>
</script>
<table border='1'>
<tr data-ng-repeat="evenement in mydata | entre_deux_dates:date_deb:date_fin ">
....

当我用键盘输入一个新的date_deb时,Angular会过滤显示的值。相反,如果使用JS日历来设置date_deb值,它会设置该值,但不会实现过滤,除非在JS中给予焦点并按下"space"。

这是JS更新date值的最后一部分:

field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2];
field.focus();

在日历中选择日期后,我能做些什么来动态更新过滤值我不希望用户在每次选择后都要按"空格"…

我在angular (ng-model-options等)和JS中尝试了很多解决方案,但都不起作用。

您需要调用一个摘要循环:

 $scope.$applyAsync(function() {
         field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2]; 
         field.focus();
});

这是因为angular是通过脏检查(dirty checking)来工作的——在每个摘要周期中(apply意味着为根作用域运行一个摘要),作用域层次结构中的所有观察者都会被检查是否有变化,并在必要时进行更新。

你可以把你的答案放在$timeout中,因为$timeout会运行摘要循环,并从错误"$apply already running"中保存。

$timeout(function() {
     field.value = dateArr[0]+'/'+dateArr[1]+'/'+dateArr[2]; 
  });