2017-02-09 8 views
0

Попытка добавить URL-адрес GET с датой, но он должен быть в формате «yyyyMMdd00».Угловой ui-sref, не может форматировать ввод даты

Несмотря пробуя все решения здесь:

AngularJS - convert dates in controller

и

Binding value to input in Angular JS

Я могу только когда-либо производить даты в формате среднего стиля: dateFrom% 3DFri + февраля + 24 + 2017 + 00% 3A00% 3A00 + GMT% 252B0000 +% 28GMT + Стандарт + Время% 29

Или ничего не появляется.

HTML (Н3 производит то, что я хочу добавить к моему URL):

 <ion-content class="item-input"> 
<label class="item-input"> 
    <span class="input-label">Date From</span> 
    <input type="date" ng-model="dateFrom"> 
</label> 
<h3>{{dateFrom | date: "yyyyMMdd00"}}</h3> 

<a ui-sref="date({dateFrom:dateFrom})">Go</a> 
</ion-content> 

Controller

 .controller("DateCtrl", function ($scope, $stateParams, dateService) { 
$scope.events = dateService.getEvents($stateParams.dateFrom).then(function (events) { 
    $scope.events = events; 

}); 

Factory:

 .factory('dateService', function ($http) { 
    var events = []; 

    return { 
     getEvents: function (date) { 
      var params = { 
       dateFrom: date 
      } 

      return $http.get('URL', { params: params }).then(function (response) { 
       events = response.data.events; 
       return response.data.events; 
      }); 

И, наконец, маршрутизация:

.state('date', { 
    url: "/date/:dateFrom", 
    templateUrl: "templates/Date.html", 
    controller: "DateCtrl" 
}) 
+0

Какую версию 'ui-router' вы используете? – Sangharsh

+0

Я использую версию 0.2.13 – Kyle

ответ

1

Использование $urlMatcherFactoryProvider.type

Используя тип, вы будете иметь доступ к декодированному объекту в контроллере и т.д.

Обновления государственной декларации немного:

.state('date', { 
    url: "/date/{dateFrom:dateType}", // Use type "dateType" here 
    templateUrl: "templates/Date.html", 
    controller: "DateCtrl" 
}) 

Включать это в файле маршрут:

$urlMatcherFactoryProvider.type('dateType', { 
    encode: function(date) { 
    // Convert date object to URL format 
    var format = 'yyyyMMdd00'; 
    return $filter('date')(date, format); 
    }, 
    decode: function(dateStr) { 
    // Convert URL date to date object 
    var year = parseInt(dateStr.slice(0, 4)); 
    var month = parseInt(dateStr.slice(4, 6)); 
    var day = parseInt(dateStr.slice(6, 8)); 
    var date = new Date(year, month, day) 
    return date; 
    }, 
    is: function(item) { 
    return true; 
    } 
}); 

Кроме того, используйте moment.js для сериализации и десериализации даты, если он уже включен в ваш проект.

+0

Я новичок во всем этом - я не могу заставить его работать. Либо его «URL-адрес не распознан», либо состояние не изменяется при нажатии. Я не использовал момент, я посмотрю на него. Спасибо! FYI - Я использую ионный, неважно? – Kyle

+0

Inject '$ urlMatcherFactoryProvider' в вашем способе конфигурации маршрутизатора – Sangharsh

+0

Я сделал это. Он все еще ничего не делает. В консоли нет ошибок для сообщения, к сожалению. – Kyle