javascript - Weird Angular controller behavior -

javascript - Weird Angular controller behavior -

i have timeframe command increments/decrements input values in months. there right arrow increments value of input (i.e. jan -> february), left arrow decrements it, , users can edit input come in in different month.

however, behavior of timeframe command odd. when click on either of errors, alter value of input "". when click again, go right month. when click again, clears input, , , forth between clearing input , going right month.

for example: if click right arrow 5 times in succession, value of input be:

january "" march "" may

what bug be? here's relevant code:

myapp.controller('timeframectrl', ['$scope', '$cookiestore', function ($scope, $cookiestore) { // create array of month names var month_dictionary = [ 'january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december']; // if month cookie doesn't exist if ($cookiestore.get('month') == null) { // create month cookie $cookiestore.put('month', 0); } // if year cookie doesn't exist if ($cookiestore.get('year') == null) { // create year cookie $cookiestore.put('year', 2014); } // go previous month $scope.prevmonth = function () { // handle corner cases of month looping var month_helper = ( $cookiestore.get('month') - 1 == -1) ? 11 : $cookiestore.get('month') - 1; // update month scope variable $scope.month = month_dictionary[month_helper]; // update month cookie $cookiestore.put('month', month_dictionary[month_helper]); } // go next month $scope.nextmonth = function () { // handle corner cases of month looping var month_helper = ($cookiestore.get('month') + 1 == 12) ? 0 : $cookiestore.get('month') + 1; // update month scope variable $scope.month = month_dictionary[month_helper]; // update month cookie $cookiestore.put('month', month_helper); } // watch manual editing of month $scope.$watch('month', function () { // update month cookie $cookiestore.put('month', month_dictionary.indexof($scope.month)); // remove warning class $('.month-control').removeclass('warning-input'); }); // set timeframe command values $scope.month = month_dictionary[$cookiestore.get('month')]; // test whether or not form inputs valid $scope.submitform = function ($valid) { // if so, update graphs if ($valid) { // update graphs // if not, add together proper warning classes } else { if ($scope.month == undefined) { $('.month-control').addclass('warning-input'); } } } }]);

if needs html can add together in. ton.

edit: html

<form class="navbar-form pull-left" name="timeframeform" ng-controller="timeframectrl" ng-submit="submitform(timeframeform.$valid)"> <div class="timeframe"><i class="fa fa-calendar fa-l"></i>timeframe</div> <i class="fa fa-angle-left" ng-click="prevmonth()"></i> <input class="form-control month-control" type="text" value="{{month}}" placeholder="month" ng-model="month" ng-pattern="/january|february|march|april|may|june|july|august|september|november|december/g"/> <i class="fa fa-angle-right" ng-click="nextmonth()"></i> <button class="btn btn-refresh"><i class="fa fa-refresh"></i></button> </form>

solution:

the problem g character @ end of ng-pattern regex in html. removing g both of regex expressions solved problem. not sure why (this resource explains better: what regular look /_/g mean?), seems g replacing months spaces. not exclusively sure why doing on every other click of arrow keys, glad problem solved

javascript jquery angularjs