web-dev-qa-db-ja.com

Angular JS日付フィルターが機能していません

$http.get()の結果をループするng-repeat要素があります。

<tr ng-repeat="blog in posts">
     <td style="text-align:center">{{ $index+1 }}</td>
     <td>{{ blog.title }}</td>
     <td>
         {{ blog.author.name }}
     </td>
     <td>
         {{ blog.created_at | date:'MMM-dd-yyyy' }}
     </td>
</tr>

MySQLデータベーステーブルにtimestampとしてcreated_atがあります。そして、私はangular.js v1.0.7を使用しています。

Dbテーブルから同じ出力を取得していますが、日付フィルターが機能していません。どうすれば解決できますか？

私のajaxコール、

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
    $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});
angularjsangularjs-ng-repeatangularjs-filter
23
devo

サーバー側から、created_at laravel雄弁。

これは、このjavascriptを使用して解決できます。

new Date("date string here".replace(/-/g,"/"));

そのため、コード、

$http({method: 'GET', url: 'http://localhost/app/blogs'}).
success(function(data, status, headers, config) {
   angular.forEach(data.posts, function(value, key){
     data.posts[key].created_at = new Date(data.posts[key].created_at.replace(/-/g,"/"));
   }
   $scope.posts = data.posts;
}).
error(function(data, status, headers, config) {
    $scope.posts = [];
});
15
devo

フィルターに渡される日付は、javascript Dateタイプである必要があります。

値blog.created_atは、フィルターなしで表示されますか？

バックアップされたサービスが日付を表す文字列を返すと言いました。これは2つの方法で解決できます。

  1. サーバー側のコードがjson日付オブジェクトを返すようにする
    • サーバー側のコードが返すJSONをシリアル化する方法を確認します
  2. 文字列の日付を受け入れ、必要な形式で日付を返す独自のフィルターを作成します
    • 注：独自のフィルターでangularフィルターを呼び出すことができます

次のように独自のフィルターを作成できます。

app.filter('myDateFormat', function myDateFormat($filter){
  return function(text){
    var  tempdate= new Date(text.replace(/-/g,"/"));
    return $filter('date')(tempdate, "MMM-dd-yyyy");
  }
});

テンプレートで次のように使用します。

<td>
  {{ blog.created_at | myDateFormat }}
</td>

返された配列をループしてからフィルターを適用するのではなく

41
Anoopsingh Bayes

次のコードのように、文字列を日付に変換するカスタムフィルターを追加できます。

app.filter('stringToDate',function ($filter){
    return function (ele,dateFormat){
        return $filter('date')(new Date(ele),dateFormat);
    }
})

次に、テンプレートでこのフィルターを次のコードとして使用します。

<div ng-repeat = "a in data">{{a.created_at |stringToDate:"medium"}}</div>
8
Mhd Wael Jazmati

次のように、_$http.get_から取得したデータに基づいてnew Date(/*...*/)を作成できます。

_$scope.date = new Date('2013', '10', '28'); // for example
_

とにかくこのデモを見ることができます Plunker。

それがあなたを助けることを願っています

6
Maxim Shoustin

日付変数を記録するときは、次のように「新しい」キーワードを使用することを忘れないでください。

var time = new Date();

それ以外の場合、次のように書くと：

var time = Date();

日付は関数として呼び出され、フィルターへの入力として使用できない日付時刻文字列が返されます。

2
Yang Zhang