Question

我有一个时间帧控件，可以递增/递减某个值为几个月的输入。有一个向右箭头增加输入的值（即1月 - > 2月），左箭头递减它，用户可以编辑输入本身以在不同的月份输入。

然而，时间帧控制的行为真的很奇怪。当我点击其中一个错误时，它会将输入值更改为""。当我再次点击时，它将转到正确的月份。当我再次点击时，它会清除输入，并在清除输入和转到正确月份之间来回切换。

例如：如果我连续点击右箭头5次，输入的值将为：

January
""
March
""
May

这个错误是什么？这是我的相关代码：

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 to the 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 to the 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 for 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 control values
    $scope.month = month_dictionary[$cookieStore.get('month')];

    // Test whether or not form inputs are valid
    $scope.submitForm = function ($valid) {

        // If so, update graphs
        if ($valid) {

            // Update graphs

            // If not, add proper warning classes
        } else {
            if ($scope.month == undefined) {
                $('.month-control').addClass('warning-input');
            }
        }
    }
}]);

如果有人也需要HTML，我可以添加它。非常感谢。

编辑：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>

Answer 1

<强>解决方案：

问题是HTML中g正则表达式末尾的ng-pattern字符。从两个正则表达式中删除g解决了这个问题。不确定为什么（这个资源更好地解释了它：What does the regular expression /_/g mean?），但似乎g用空格替换月份。不完全确定为什么它在每次点击箭头键时都这样做，但很高兴问题解决了

奇怪的角度控制器行为

1 个答案: