双向数据绑定第一次不起作用。 angularjs

时间:2016-06-08 17:57:13

标签: jquery angularjs

我有一个文本框,我应用了日期范围选择器。选择日期后,我将从后端获取数据并填充到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>

0 个答案:

没有答案