如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定? [英] how to bind Bootstrap-datepicker element with angularjs ng-model?

问题描述

这是日期字段的html:

<label>签出</label><input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
<脚本>$('#check-out').datepicker();

日期选择器显示在输入字段中.但是，如果我在控制器中执行此操作:

console.log($scope.checkOut);

我在 javascript 控制台中得到 undefined.如何解决这个问题?
有没有更好的方法将 bootstrap-datepicker 与 angularjs 一起使用?

我不想使用 angular-ui/angular-strap，因为我的项目充斥着 javascript 库.

解决方案

正如@lort 所建议的，您无法从控制器访问 datepicker 模型，因为 datepicker 有自己的私有范围.

如果你设置:ng-model="parent.checkOut"

并在控制器中定义:$scope.parent = {checkOut:''};

您可以使用以下方式访问日期选择器:$scope.parent.checkOut

Here is the html for the date field :

<div class='form-group'>
  <label>Check out</label>
    <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">
</div>
<script>
$('#check-out').datepicker();
</script>

The datepicker shows up in the input field. However if I do this in my controller :

console.log($scope.checkOut);

I get undefined in the javascript console. How to solve this ?
Is there a better way to use bootstrap-datepicker with angularjs ?

I don't want to use angular-ui/angular-strap since my project is bloated with javascript libraries.

解决方案

As @lort suggests, you cannot access the datepicker model from your controller because the datepicker has its own private scope.

If you set: ng-model="parent.checkOut"

and define in the controller: $scope.parent = {checkOut:''};

you can access the datepicker using: $scope.parent.checkOut

这篇关于如何将 Bootstrap-datepicker 元素与 angularjs ng-model 绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！