角。 ng-model 没有在 datepicker 中更新答案

【问题标题】：Angularjs. ng-model is not being updated in datepicker角。 ng-model 没有在 datepicker 中更新
【发布时间】：2016-11-19 11:52:21
【问题描述】：

我正在尝试编写 jquery 以使用隐藏输入区域在文本单击时打开日期选择器。这在多个地方也是必需的。

以下是我的html。

<div class="date-format">
    <input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1"/>
    <a href="" class="date-picker" id="date1">{{date1 | date: 'dd MMM yyyy a'}}</a>
</div>
<div class="date-format">
    <input class="hidden-date-picker" id="hidden-date2" type="hidden" ng-model="date2"/>
    <a href=""  class="date-picker" id="date2">{{date2 | date: 'dd MMM yyyy a'}}</a>
</div>

以下是 javascript -

var app = angular.module('index-app', []);

app.controller('index-controller', function($scope) {
$scope.date1 = new Date(2016, 0, 1);
$scope.date2 = new Date();

$('.hidden-date-picker').each(function() {
    $(this).datepicker({
        changeYear: 'true',
        changeMonth: 'true',
        startDate: '07/16/1989',
        firstDay: 1,
        onSelect: function(dateText, inst) {
            console.log($scope.$eval($(this).attr('ng-model')));
            $scope.$eval($(this).attr('ng-model')).setTime(Date.parse(dateText));
            console.log($scope.date1);
        }
    });
});
$('.date-picker').each(function() {
    $(this).click(function (e) {
        $('#hidden-' + $(this).attr('id')).datepicker('show')
        e.preventDefault();
    });
});
});

从控制台输出中可以清楚地看出，在从日历中选择日期时正在修改 $scope.date1。但是这种变化并没有反映在 html 方面。

【问题讨论】：

使用 $scope.$apply() 后，我能够解决问题。但是，如果我在其他地方尝试。它不会工作。

标签： javascript jquery angularjs datepicker

【解决方案1】：

使用指令可以解决您的 ng-model 未更新问题

您的 html 代码

<input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1" customzdatetime />

将指令“customzdatetime”添加到您的输入标签。

app.directive('customzdatetime', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            element.datetimepicker({
                debug: false,
                format: 'DD-MM-YYYY',
                maxDate: moment()
            }).on('dp.change', function (e) {
                ngModelCtrl.$setViewValue(e.date);
                scope.$apply();
            });
        }
    };
});

【讨论】：

【解决方案2】：

以下代码可以帮助您。对于 HTML

<div class="input-group date mydatepicker" data-provide="datepicker">
    <input type="text" class="form-control" style="outline:none !important;" id="CancelDate"
    data-ng-model="CancelDate" data-ng-required="true" placeholder="Cancel Date" 
    data-ng-change="onChange()"
    data-ng-trim="true" readonly/>
    <div class="input-group-addon custumc_con">
        <i class="fa fa-calendar" aria-hidden="true"></i>
    </div>
</div>

对于角度控制器

$scope.onChange = function () {

//initialize today date
var today = new Date();

//set new date as next 10th day of today
var newDate = newDate.setDate(today.getDate() + 10);

//format date and set to angular model
$scope.CancelDate = newDate.format("MM/dd/yyyy");

// set new date in datepicker of bootstrap
    $('.mydatepicker').datepicker('update', $scope.CancelDate);
}

【讨论】：