[英]Weird Angular controller behavior
我有一个时间框架控件,可以增加/减少某些输入(其值以月为单位)。 有一个向右箭头增加输入的值(即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>
解:
问题是HTML中ng-pattern
正则表达式末尾的g
字符。 从两个正则表达式中删除g
解决此问题。 不确定为什么(此资源对此进行了更好的解释: 正则表达式/ _ / g是什么意思? ),但是g
似乎用空格代替了月份。 不能完全确定为什么每次单击箭头键都这样做,但是很高兴问题得以解决
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.