2016-09-17 5 views
0

カスタムフィルター、日付フィルター、ng-repeatを使用してサンプルを書き始めました。基本的に私のモデルの一部としての日付プロパティ。AngularJSのDateField

<!DOC TYPE html> 
    <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> 
    </script> 
    <script> 
    var customfilter= angular.module("filterapp",[]) 
    customfilter.controller("filterctrl",function($scope){ 
     $scope.jdate= new Date(); 
     $scope.tabledata=[ 
          {numbers:1, 
          firstName:"Eve", 
          lastName:"Jackson", 
          salary:45000, 
          jdate:'23/04/2013' 
          }, 

          {numbers:2, 
          firstName:"John", 
          lastName:"Doe", 
          salary:55000, 
          jdate:'22/02/2010'}]; 

    }); 
    customfilter.filter("taxcalc",function(){ 
     return function(salary){ 
        if(salary > 50000) 
      { 
        tax= salary * (20/100); 
      } 
      else if(salary > 40000) 
      { 

       tax = salary * (10/100); 
      } 

      else{ 

       tax= salary * (5/100); 
      } 
      return tax; 
     } 
    }); 
    </script> 
    </head> 
    <body ng-app="filterapp"> 
    <div ng-controller="filterctrl"> 
    <table> 
    <thead> 
    <th>numbers</th> 
    <th>firstname</th> 
    <th>lastname</th> 
    <th>salary</th> 
    <th>joiningdate</th> 
    <th>tax</th> 
    </thead> 
    <tbody> 
    <tr ng-repeat="arraydata in tabledata"> 
    <td>{{arraydata.numbers}}</td> 
    <td>{{arraydata.firstName}}</td> 
    <td>{{arraydata.lastName}}</td> 
    <td>{{arraydata.salary}}</td> 
    <td>{{arraydata.jdate| date: 'shortDate'}}</td> 
    <td>{{arraydata.salary | taxcalc}}</td> 
    </tr> 
    </tbody> 
    </table> 
    </div> 
    </body> 
    </html> 

答えて

2

日付はオブジェクトであり、文字列ではありません。代わりにjdate: '23/04/2013'の はjdate: new Date('23/04/2013')

注意してみてください:あなたは、無効な日付のエラーを取得している場合、あなたはそのどこにも使用されていないので、あなたはまた、$scope.jdate= new Date();を削除することができますjdate: new Date('04/23/2013')

のように日と月の反転が必要になる場合があります。

+0

ありがとうございました – HAraTest

+1

または[ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)の日付形式 'Date( '2013-04-23')を使用してください。 ' – Lipis

関連する問題