Не обновляются данные angular?

Question

[olafars]

Доброго времени суток!
Есть такой код:

angular.module("transactionsApp", [])
        .controller("formCtrl", function ($scope, $http) {

            $scope.count = 0;

            var date = new Date();
            var prevDate = new Date();
            prevDate.setDate(prevDate.getDate()-7);/*берем время на неделю назад*/
            $scope.dateStart = prevDate.getFullYear() + '-' + (prevDate.getMonth() + 1) + '-' + prevDate.getDate();
            $scope.dateFinish = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            $scope.transactions = 0;

            $http.post('/cabinet/transactions/getTransactions', {
                    start: $scope.dateStart,
                    finish: $scope.dateFinish,
                    transactions: $scope.transactions,
                    count: $scope.count,
                })
                .success(function(param){
                    console.log(param);
                    $scope.dataTable = param;
                })
                .error(function() {
                    console.log('error');
                });

            $scope.getData = function () {
                angular.element('#dateStart').triggerHandler('change');
                var data = {
                    start: $scope.dateStart,
                    finish: $scope.dateFinish,
                    transactions: $scope.transactions,
                    count: $scope.count,
                };
                console.log(data);
                $http.post('/url', data)
                    .success(function(param){
                       console.log(param);
                    })
                    .error(function() {
                        console.log('error');
                    });
                $scope.count +=20;
            };
        });

и вот такой html:

<div class="transaction" ng-controller="formCtrl">
    <form ng-submit="getData(e)">
    <div class="button-search">
        <div class="form-group">
            <label for="exampleInputName2">Дата начала:</label>
            <input type="text" class="form-control date" id="dateStart" placeholder="" ng-model="dateStart" >
        </div>
        <div class="form-group">
            <label for="exampleInputName2">Дата окончания:</label>
            <input type="text" class="form-control date" id="dateFinish" placeholder="" ng-model="dateFinish" >
        </div>
        <div class="form-group">
            <label for="fm-8">Тип транзакции</label>
            <select name="transaction_type" class="form-control" id="transactions" ng-model="transactions" aria-labelledby="fm-7">
                <option value="0">Все</option>
                <option value="1">Начисление стартового бонуса покупателю</option>
                <option value="2">Ручное начисление бонусов на карту покупателя</option>
                <option value="3">Ручное списание бонусов с карты покупателя</option>
                <option value="4">Начисление бонусов на карту покупателя</option>
                <option value="5">Списание бонусов с карты покупателя</option>
                <option value="6">Сгорание бонусов на карте покупателя</option>
                <option value="7">Начисление Дружеского Бонуса</option>
            </select>
        </div>
        <div class="form-group">
            <button name="submit" value="filter" class="btn-search-form" aria-labelledby="">Искать</button>
        </div>
    </div>
    <table class="table table-striped table-transactions">
        <thead>
            <tr>
                <th>Время</th>
                <th>Бонус</th>
                <th>№ чека</th>
                <th>Сумма</th>
                <th>Касса</th>
                <th>Тип транзакции</th>
                <th>Ответственный</th>
                <th>№ карты</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in dataTable">
                <td>{{item.time}}</td>
                <td>{{item.bonus}}</td>
                <td>{{item.ticket}}</td>
                <td>{{item.sum}}</td>
                <td>{{item.kassa}}</td>
                <td>{{item.type}}</td>
                <td>{{item.access}}</td>
                <td>{{item.card}}</td>
            </tr>
        </tbody>
    </table>
</form>
    <button class="update-table">
        <span class="glyphicon glyphicon-repeat"></span>
    </button>
</div>

проблема заключается в том, что при изменении данных - не срабатывает обновление $scope.dateStart и $scope.dateFinish, т.к. нет изменения самого значения, оно задается через datapicker фреемворка bootstrap, т.е. при клике на input - выпадает окошко с выбором даты, я выбираю, текст в поле меняется, но по факту, само значение не поменялось и изначально остается таким же каким было задано по умолчанию. Если поменять дату в ручную без datapicker, то связь отрабатывает и изменения происходят, данные меняются. Я пытался имитировать событие change, но результатов это на данный момент не дало, в чем может быть проблема, где я ошибся?

Answer 1

[MNB]

!!!Дата должна быть дата, а не строка!!!
Для корректной работы дейтпикера в ануларе придется колдовать с событиями. Я бы посоветовал https://angular-ui.github.io/bootstrap/#/datepicker

Comments

[olafars]

На счет даты - вы правы, наследие коллеги)
За ссылку спасибо.
Когда представление будем переделывать - переделаю, сейчас решил все angular.element().val()

Answer 2

[lega]

1) Лучше всего использовать готовую диреткиву для этого, под bootstrap она должна быть.
2) С датами лучше оперировать типом Date а не в строковом.
3) triggerHandler - это ангуляроская мулька, сделайте нормальное js событие - new Event('change') и dispatch его в элемент, тогда модель должна среагировать.

Comments

[olafars]

про 3 вариант можно поподробнее, если не сложно?

[lega]

var event = new Event('change');
var el = $('input');
el.value = 'value';
el.dispatchEvent(event);

т.к. у вас datetime, то значение даты можете засунуть в el.valueAsDate или в el.valueAsNumber