Question

我的项目需要datetime所以我发现（Meridian Format in）bootstrap-datetimepicker看起来相当不错，但我无法使用它

我在代码中所做的就是

  <div class="control-group">
    <label class="control-label">Date</label>

    <div class="controls">
      <div class="control-group input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
        <input size="16" type="text" ng-model="transaction.date" data-date-format="yyyy-mm-dd hh:ii" value="">
        <span class="add-on"><em class="icon-remove"></em></span>
        <span class="add-on"><em class="icon-th"></em></span>
      </div>
    </div>
  </div>

但是当我在控制器中执行console.log（$ scope.transaction）时

  $scope.save = function() {
    var transaction = new Transaction();
    transaction.name = $scope.transaction['name'];
    transaction.debit = $scope.transaction['debit'];
    transaction.date = $scope.transaction['date'];
    transaction.amount = $scope.transaction['amount'];
    transaction.category = $scope.transaction['category'].uuid;
    console.log('adding', $scope.transaction);
 }

我看到了

Resource {name: "Test", debit: "False", date: undefined, amount: "12", category: "7816635c-3da1-4ccc-b8ab-c07bc3b42202"…}

日期未定义。如何将UI中选择的值与ng-model相关联？

更新
虽然，使用jQuery，我可以看到值

$('.form_datetime input').val()
"08 May 2013 - 08:12 AM"

由于

Answer 1

并非所有jQuery插件都可以直接使用Angular。 Angular没有观察到“外部”更改的输入，因为它希望仅在（a）用户更改它或（b）由控制器更改时才更改该值。肯定会修改角度代码以监视输入值的变化，但结果可能会影响性能。

我已经复制了您在此处看到的问题：http://jsfiddle.net/kf4Xt/

如果你想远离“hack”（手动从.val（）中提取日期），你需要将这个插件包装在一个指令中并使用该指令。这样做会更好地与Angular一起使用，你会做“Angular Way”。

该指令应负责调用$(element).datetimepicker()，并通过双向绑定提供所选值。

AngularStrap项目正在使用很多Twitter Bootstrap插件完成此操作，因此您可以查看其来源如何查看它是如何完成的。

Answer 2

因为，我的项目也依赖于jQuery，我做了以下操作，使其在我的控制器中工作

transaction.date =  $('.form_datetime input').val()

在console.log上，我看到了

Resource {name: "OneMore", debit: "True", date: "2013-05-08T12:27:50", amount: "123", category: "79128f9a-74ab-4c63-b60e-4934aa367575"…

我现在不知道有什么更好的技术可以解锁我自己，如果有人知道一个有棱有角的方式，请告诉我

Answer 3

我知道这有点老了，但只要您使用解决方案解决方案并要求让您了解有角度的方式，我认为您正在寻找：

Angular Datetime Picker

它采用Twitter Bootstrap设计，但我认为这不会有问题。

在AngularJS中使用bootstrap-datetime选择器

3 个答案: