7

私のプロジェクトには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 に関連付けるにはどうすればよいですか?

UPDATE
ただし、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 とよりインラインになり、「Angular の方法」で行うことになります。

ディレクティブは、 を呼び出し$(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 に答える