[英]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.