7

我的项目需要日期时间，所以我发现（子午线格式）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"

谢谢

4

3 回答 3

3

并非所有 jQuery 插件都可以直接与 Angular 一起使用。Angular 没有观察“外部”更改的输入，因为它希望值仅在 (a) 用户更改它，或 (b) 它被控制器更改时才会更改。Angular 代码当然会被修改以监视输入值的变化，但性能可能会因此受到影响。

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

如果您想摆脱“黑客”（手动从 .val() 中提取日期），则需要将此插件包装在指令中并使用该指令。这样做会更符合 Angular 的要求，而且你会使用“The Angular Way”。

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

AngularStrap项目使用许多 Twitter Bootstrap 插件正是这样做的，因此您可以查看它们的源代码以了解它是如何完成的。

于 2013-05-08T19:30:19.007 回答
1

因为，我的项目也依赖于 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"…

我目前不知道任何更好的技术，所以自己畅通无阻，如果有人知道角度方式，请告诉我

于 2013-05-08T19:29:35.400 回答
1

我知道这有点老了，但是只要您用解决方法回答自己并要求让您了解角度方式，这就是我认为您正在寻找的内容：

Angular 日期时间选择器

它采用 Twitter Bootstrap 的样式，但我认为这不会成为问题。

于 2013-09-20T02:50:25.910 回答