Question

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

的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;
        });
  };
});

Answer 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" />

Datepicker不会与控制器 - AngularJS做出反应

1 个答案: