Question

我想使用AngularJS和jQuery Datepicker按日期过滤我的事件。但似乎无法使用输入文本......

我的下面的代码适用于活动的标题......

主要问题：当我在jQuery Datepicker中选择一个日期时，我没有得到任何事件......

    $scope.onChange = function(){
      $scope.search.start = new Date(moment($scope.search.start, 'DD/MM/YYYY').format("YYYY-MM-DD 00:00:00"));
      $scope.search = _.reduce($scope.search, function(result, n, key) {
        if (n !== '') {
          result[key] = n;
        }
        return result;
      }, {});
      $scope.events = data.events;
      $scope.filteredEvents = $filter('filter')($scope.events, $scope.search);
    };

<input class="form-control datepicker" id="start" type="text" ng-model="search.start" ng-change="onChange()" autocomplete="off">
<input class="form-control" id="title" type="text" ng-model="search.title" ng-change="onChange()" autocomplete="off">

    <div class="col-12" ng-repeat="event in events | filter:search | limitTo:limit">
      <div class="event">
        <div class="event-body">
          <a href="/event/show/{{event.id}}" class="event-title">{{event.title}}</a>
          <p ng-if="event.end" class="event-date">{{event.start | date:"dd/MM/yyyy"}}</p>
        </div>
      </div>
      <div class="space10"></div>
    </div>

Answer 1

开箱即用的 JQueryUI datepicker将无法使用angular，因为当Jquery设置输入值时，角度模型不会更新。您需要告诉 JQueryUI datepicker更新模型。

执行此操作的最佳方法是创建一个设置datepicker的指令，并添加onSelect方法，该方法设置视图值模型控制器视图值ngModelCtrl.$setViewValue并将其应用于范围{{1 }}

<强> HTML：

scope.$apply()

<强> JS

<input type="text" ng-model="date" datepicker />

如果您还希望使用与使用日期选择器提供的格式不同的日期，则需要使用app.directive('datepicker', function() { return { restrict: 'A', require : 'ngModel', link : function (scope, element, attrs, ngModelCtrl) { $(function(){ element.datepicker({ dateFormat:'dd/mm/y', onSelect:function (date) { scope.$apply(function () { ngModelCtrl.$setViewValue(date); }); } }); }); } } });指令进行格式化。

ng-change

Working Example

使用AngularJS按日期过滤事件

1 个答案: