我有一个文本框,我应用了日期范围选择器。选择日期后,我将从后端获取数据并填充到UI中的字段。这里 双向绑定第一次不起作用。它从第二次开始工作正常。
这是我的代码:
js file:
$('#txtDateRange').on('apply.daterangepicker', function (ev, picker) {
$scope.isRefreshing = true;
$scope.Model.DateTo = $filter('date')(new Date(picker.endDate), 'MM/dd/yyyy');
$scope.Model.DateFrom = $filter('date')(new Date(picker.startDate), 'MM/dd/yyyy');
$scope.Model.typeAvailability = picker.chosenLabel === "Custom Range" ? "Custom" : picker.chosenLabel;
$scope.$apply();
$scope.FilterByDate();
});
$scope.FilterByDate = function () {
if ($scope.selectedItem == null || $scope.selectedItem == 'undefined') {
$scope.BetweenDatesFilter = $filter('filter')($scope.Summary.CorpEmployees, function (o) {
return (new Date(o.startDate) > new Date($scope.Model.DateFrom)) && (new Date(o.startDate) < new Date($scope.Model.DateTo));
});
$scope.NewEmps = $scope.BetweenDatesFilter.length;
$scope.otcScred = $scope.BetweenDatesFilter.length;
}
};
HTML:
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
<span style="color: #a94442">
<label class="control-label" class="has-error" ng-show="txtDateRange.$invalid">Required.</label>
</span>
</div>
<div id="divSmry" class="img-fluid">
<img src="~/Content/Images/wotc/SummaryTop1x.png" class="img-fluid" alt="Responsive image" style="position:absolute;left:75px;" />
<a href="javascript:void(0)" onclick="showOptionsMenu('E', 'Wotc', 'glyphicon glyphicon-th-list'); LoadViewSelected('/otc/otc/otcDashBoard', 'WotcDashBoardModule', 'CorporateComplianceEmployees');">
<span style="position:absolute;left:125px;top:165px;font-size:40px">{{NewEmps}}</span>
</a>
<span style="position:absolute;left:245px;top:165px;font-size:40px">{{otcScred}}</span>
</div>