Datepicker 不与控制器反应 - AngularJS

Posted 2023-05-09

【中文标题】Datepicker 不与控制器反应 - AngularJS

【英文标题】：Datepicker doesn't react with controller - AngularJS

【发布时间】：2017-11-13 04:52:36

【问题描述】：

我使用 2 个日期制作了一个过滤器，并根据发布日期呈现适当的文章。我的日期选择器正在选择日期，但不与控制器做出反应以显示适当的文章。但是当我手动输入日期时它会起作用。

index.html

 <ul class="list-inline">
<li>
    <label>from</label><input type="text" name="S_Date" ng-model="from" id="from-datepicker" class="form-control" />
</li>
<li>
    <label>till</label><input type="text" name="E_Date" ng-model="to" id="from-datepicker2" class="form-control"/>
</li>
</ul>

<article class="white-panel" ng-repeat="x in results | orderBy: '-published_date' | myfilter : from : to">
    <h5><b>x.section</b></h5>
    <h4><a ng-href="x.url" target="_blank">x.title</a></h4>
    <h5>x.byline</h5>
    <p>x.abstract
    <br><br>
    <i>x.published_date | date: 'medium' </i>
    </p>
</article>

controller.js

var app = angular.module('myApp', []);
app.controller('appController', function($scope, $filter) 
    var url = "https://api.nytimes.com/svc/topstories/v2/home.json";
    url += '?' + $.param(
      'api-key': "853fc084776f46e29732e71b3f1269ae"
    );
    $.ajax(
      url: url,
      method: 'GET',
    ).done(function(result) 
      console.log(result);
      $scope.$apply(function()
        $scope.results = result.results;
    );
    ).fail(function(err) 
      throw err;
    );

    $scope.from="2017-05-02";
    $scope.to="2017-06-11";

);

$("#from-datepicker").datepicker( 
    format: 'yyyy-mm-dd'
);


$("#from-datepicker2").datepicker( 
    format: 'yyyy-mm-dd'
);

app.filter("myfilter", function() 
  return function(results, from, to) 
        return results.filter(function(results)
            return results.published_date >= from && results.published_date 
<= to;
        );
  ;
);

【问题讨论】：

这是因为 ng-model 没有在日期选择器更改时得到更新

感谢您的快速回答。你能给我一些建议，我应该如何更新它？？

你在使用 jquery datepicker。使用该日期选择器的 onchange 事件并使用 $scope.$apply(function() 更新模型更改

您也可以为此创建一个指令，例如***.com/a/38410714/4018629

【参考方案1】：

创建一个自动处理模型更新的指令

app.directive('datepicker', [function () 
        return 
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) 
                $(function () 
                    element.datepicker(
                        dateFormat: 'mm/dd/yy',
                        onSelect: function (date) 
                            scope.$apply(function () 
                                ngModelCtrl.$setViewValue(date);
                            );
                        
                    );
                );
            
        
    ]);

<input type="text" datepicker name="S_Date" ng-model="from"  class="form-control" />