angularjs中的序数日期

Question

我想将日期显示为 2017年9月4日。

用于AngularJs视图（html模板）

Start Date :  {{info.start_date| date:'dd MMM yyyy'}}

显示 2017年9月4日，而不是 2017年9月4日。

请帮忙。

Answer 1

请先了解Ordinal number的内容。你可以手动完成。我不知道moment.js有序数日期的默认功能。所以我在这里为序数日期和数字创建了一个自定义过滤器。

序数日期

＆＃13;

＆＃13;

var app = angular.module('filters', []);

    app.controller('demo', function($scope){
      $scope.example1 = "04 Sep 2017";
       $scope.example2 = "12 Sep 2017";
        $scope.example3 = "23 Sep 2017";
    })

    app.filter('ordinalDate', function(){
      return function(date){
      var number=parseInt(date.split(" ")[0]);
      var MonthAndYear= " " + date.split(" ")[1] +" " + date.split(" ")[2];
        if(isNaN(number) || number < 1){
          return number;
        } else {
          var lastDigit = number % 10;
          if(lastDigit === 1){
            return number === 11 ? number + 'th' + MonthAndYear: number + 'st' + MonthAndYear;
          } else if(lastDigit === 2){
            return number === 12 ? number + 'th' + MonthAndYear: number + 'nd' + MonthAndYear;
          } else if (lastDigit === 3){
            return number === 13 ? number + 'th' + MonthAndYear: number + 'rd' + MonthAndYear;
          } else if (lastDigit > 3 || lastDigit === 0 ){
            return number + 'th' + MonthAndYear;
          }
        }
      }
    })

＆＃13;

 body {
      background: White;
    }

    .credits {
      margin: 15px 0px;
    }

    .panel {
      margin: 15px 0px;
    }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
          <div ng-app="filters">
            <div ng-controller="demo">
              <div class="panel panel-default">
                 <div class="panel-body">
                   <h4 class="text-center">AngularJS Filter - Ordinal Numbers</h4>
                   <p><strong>Original:</strong></p>
                   <ul class="list">
                     <li>{{example1}}</li>
                     <li>{{example2}}</li>
                      <li>{{example3}}</li>
                     
                   </ul>
                   <p><strong>Ordinal Date Filter:</strong></p>
                   <ul class="list">
                     <li>{{example1 | ordinalDate}}</li>
                     <li>{{example2 | ordinalDate}}</li>
                     <li>{{example3 | ordinalDate}}</li>
                   </ul>
                </div>
              </div>
          </div>
        </div>
      </div>

      <div class="row credits">
          <div class="col-lg-6 col-lg-offset-3 text-center">
            <a target="_blank" href="https://www.scotch.io">Read Full Tutorial on Scotch.io</a>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

序号

尝试以下方法来实现此目的。

＆＃13;

＆＃13;

var app = angular.module('filters', []);

app.controller('demo', function($scope){
  $scope.example1 = 1;
  $scope.example2 = 2;
  $scope.example3 = 3;
  $scope.example4 = 4;
  $scope.example5 = 11;
  $scope.example6 = 12;
  $scope.example7 = 13;
  $scope.example8 = 14;
  $scope.example9 = 21;
  $scope.example10 = 32;
})

app.filter('ordinal', function(){
  return function(number){
    if(isNaN(number) || number < 1){
      return number;
    } else {
      var lastDigit = number % 10;
      if(lastDigit === 1){
        return number === 11 ? number + 'th': number + 'st'
      } else if(lastDigit === 2){
        return number === 12 ? number + 'th': number + 'nd'
      } else if (lastDigit === 3){
        return number === 13 ? number + 'th': number + 'rd'
      } else if (lastDigit > 3 || lastDigit === 0 ){
        return number + 'th'
      }
    }
  }
})

＆＃13;

body {
  background: White;
}

.credits {
  margin: 15px 0px;
}

.panel {
  margin: 15px 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-3">
      <div ng-app="filters">
        <div ng-controller="demo">
          <div class="panel panel-default">
             <div class="panel-body">
               <h4 class="text-center">AngularJS Filter - Ordinal Numbers</h4>
               <p><strong>Original:</strong></p>
               <ul class="list">
                 <li>{{example1}}</li>
                 <li>{{example2}}</li>
                 <li>{{example3}}</li>
                 <li>{{example4}}</li>
                 <li>{{example5}}</li>
                 <li>{{example6}}</li>
                 <li>{{example7}}</li>
                 <li>{{example8}}</li>
                 <li>{{example9}}</li>
                 <li>{{example10}}</li>
                 
               </ul>
               <p><strong>Ordinal Filter:</strong></p>
               <ul class="list">
                 <li>{{example1 | ordinal}}</li>
                 <li>{{example2 | ordinal}}</li>
                 <li>{{example3 | ordinal}}</li>
                 <li>{{example4 | ordinal}}</li>
                 <li>{{example5 | ordinal}}</li>
                 <li>{{example6 | ordinal}}</li>
                 <li>{{example7 | ordinal}}</li>
                 <li>{{example8 | ordinal}}</li>
                 <li>{{example9 | ordinal}}</li>
                 <li>{{example10 | ordinal}}</li>
               </ul>
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="row credits">
      <div class="col-lg-6 col-lg-offset-3 text-center">
        <a target="_blank" href="https://www.scotch.io">Read Full Tutorial on Scotch.io</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;