7

とブートストラップ・日時ピッカーを使用して私のプロジェクトは日時を必要とするので、私は私のコードでやったすべてがAngularJS

である私はかなり良いようだ 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> 

が、私は私のコントローラで

$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); 
} 

をにconsole.log($ 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" 

おかげ

+1

また、角度のための別のdatetimepickerディレクティブがhttps:// githubにあります。com/zhaber/datetimepicker –

答えて

1

私のプロジェクトでもjQueryの依存、ので、私はそれが私の中で動作させるために以下のことをやりましたコントローラにconsole.logで

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

、私は

01を参照してください私は、現時点では任意のより良い方法を知っていない
Resource {name: "OneMore", debit: "True", date: "2013-05-08T12:27:50", amount: "123", category: "79128f9a-74ab-4c63-b60e-4934aa367575"… 

ので、誰かが角道を知っている場合、私はすべてのjQueryのプラグインは右の角度で箱から出して動作していない

3

を教えてください、自分自身をブロックを解除しました。 Angularは、(a)ユーザーが変更した場合、または(b)コントローラーによって変更された場合にのみ値が変更されることを期待しているため、「外部」変更の入力を監視していません。角度コードは入力値の変化を監視するために変更されますが、結果としてパフォーマンスが低下する可能性があります。

私はあなたがここで見ている問題で複製しました:あなたは離れてあなたの(手動)(.valから日付を引っ張って)「ハッキング」から取得したい場合は、あなたが必要になるだろうhttp://jsfiddle.net/kf4Xt/

をこのプラグインをディレクティブで囲み、そのディレクティブを使用します。このようにするとAngularとインラインになり、「Angular Way」を実行します。

この指示文は、$(element).datetimepicker()を呼び出し、双方向バインディングで選択した値を提供する必要があります。

AngularStrapプロジェクトは、多くのTwitter Bootstrapプラグインでこれを正確に行っています。そのため、ソースの内容を確認することができます。

+0

あなたは私にその方法を教えてもらえますか?私はかなり新しいです、ここに私のプランカです - http://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxH?p=preview – daydreamer

+0

あなたがそこに何を持っているかのように思えますが、あなたはそれをさらに要素の指示:http ://plnkr.co/edit/uSjf5AfLUTakxVJEsJqB?p = preview - あなたはそれを少しきれいにする必要があります(隔離されたスコープを使用して値を渡すので、テンプレート内のすべてをハードコードしません) – Langdon

+0

ありがとう、昨日、私はhttp://plnkr.co/edit/wGrvXAFmPGoYSwh9GfxHを考え出しましたが、あなたのアイデアはきちんとしてきれいですが、あなたのプランナーでng-modelを 'ng-model ="トランザクション.date "'、これは、私がそれをしたときに失敗し、 'scope.ngModel = input.val();'を 'scope.transaction.date = input.val();に変更したためです。私の場合、それはあなたがmu plunkerで見ることができる$ scope.transaction = {} 'の一部でなければなりません – daydreamer

1

私はこれが古いの一種であることを知っているが、限り、あなたはこの問題を回避するソリューションを自分で答えてあなたが角道を知らせるように求めてきたように、ここで私はあなたが探していたことを考えるものです:

Angular Datetime Picker

これはTwitterのブートストラップでスタイルされていますが、これは問題ではないと思います。