【问题标题】:Bootstrap-ui datepicker : how of have an empty ng-model?Bootstrap-ui datepicker:有一个空的 ng-model 怎么样?
【发布时间】:2016-02-01 15:41:47
【问题描述】:

在一个 Angular 项目中,我有一个 bootstrap-ui 日期选择器,用于提供发票付款日期的信息。

最初,在创建发票时,由于尚未支付,所以我应该有一个 ng-model 变量指示 null 或类似的东西:

$scope.invoice.Payment_Date = null

问题是,日期选择器似乎需要一个有效的日期对象才能工作。以这种方式使用所有内容时,当我在 datepicker 中选择一个日期表示我的发票已支付时,datepicker 会指示正确的日期,例如 2016 年 2 月 15 日,星期二,但 ng-model 变量仍然为空。

如果我这样初始化变量:

$scope.invoice.Payment_Date = new Date();

然后在更改日期选择器日期时,ng-model 会按应有的方式更新。

问题是,我可能不得不创建/更新发票而不说它已经付款,这样做,我得到一个 Payment_Date,它具有所述发票的创建/更新日期的值。

有没有办法在日期选择器保持不变时将此变量设置为 null 或为空,但在使用时让它获得正确的日期选择器值?

希望有人可以提供帮助!

编辑:这是日期选择器的 HTML 代码:

<form name="formFacture" novalidate rc-submit="modifierFacture()">  
<div class="form-group">
    <label>Date de paiement : </label>
        <p class="input-group">
            <input type="text" class="form-control" uib-datepicker-popup="dd MMMM yyyy" ng-model="facture.Date_Paiement" is-open="popupDatePaiement.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Fermer" clear-text="Effacer" current-text="Aujourd'hui" readonly="readonly" ng-click="openDatePaiement()" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="openDatePaiement()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
<div class="container text-center">
    <button type="submit" class="btn btn-primary">Enregistrer</button>
    <div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')">Retour</div>
</div>

</form>

这是 JS 代码:

$scope.facture = {};
$scope.dateOptions = {
   startingDay: 1
 };
$scope.popupDatePaiement = {
   opened: false
};
var openDatePaiement = $scope.openDatePaiement = function() {
   $scope.popupDatePaiement.opened = true;
};

$scope.modifierFacture = function(){
   console.log($scope.facture);
   return
}

查看代码后发现:

  1. 我可以使用 datepicker 获得一个有效的日期(ng-model 有一个小错误),但是如果我两次更改日期,facture.Date_Paiement 变量将保留第一个选择,第二个选择不会被转发给它。
  2. 如果我使用日期选择器中的“清除”按钮,facture.Date_Paiement 变量不会恢复为 null
  3. 我试过添加这一行:

    $scope.Date_Paiement = null

在 openDatePaiement 函数内部,但在这种情况下,facture.Date_Paiement 始终为空。

【问题讨论】:

  • 我使用了具有我们设置为 null 的范围属性的日期选择器来清除日期而不会出现问题。我猜您的问题出在其他地方(例如日期选择器所在的范围)。您可以在使用日期选择器的地方发布 html 吗?
  • 对不起,我试着做一个 plunkr 但无法让它工作:(
  • 按您的要求更新了代码,感谢您的帮助!

标签: angularjs datepicker angular-ui-bootstrap isnullorempty


【解决方案1】:

好的,经过数小时研究这个问题的原因后,我找到了答案。

不要依赖 console.log(object) 来告诉你对象内部是什么,因为解析对象以在控制台内呈现它的函数似乎有问题!

改为使用 console.log(JSON.stringify(object)) ,您将获得正确的值。

我的头还在痛,这种东西出问题了怎么办???

【讨论】:

猜你喜欢
  • 2015-09-12
  • 2017-09-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-04-19
  • 2014-12-01
相关资源
最近更新 更多