延迟数据-ng-更改,直到用户竞争键入输入文本

时间:2016-01-08 14:50:07

标签: javascript html angularjs

我有一个消息应用,我试图编辑一些消息。
当我试图在日期输入文本上编辑某些内容时出现错误,因为ng-check被立即激活但我想延迟它直到我按照自己的意愿完成编辑日期。 我尝试使用ng-model-options="{debounce: 8000}",但它没有用。 我还特意使用一个函数,它会在特定的超时后调用我想在ng-change中执行的任务,但它也不起作用。

我的editMessage查看:

<div class="view">
    <div class="container">
        <header>
            <h3>Edit Message</h3>
        </header>
        <form name="editForm" novalidate>
            <div>
                <div class="input-group">
                <span class="input-group-addon">Message name:</span>
                <input type="text" name="name" class="form-control" readonly="readonly" data-ng-model="message.name">
                </div>
                <div class="input-group">
                <span class="input-group-addon">Message Screens:</span>
                <input type="text" name="name" ng-repeat="screen in message.screensId" class="form-control" data-ng-model="message.screensId[$index]" required>
                <button ng-click="toggleScreen()">Add Screen</button>
                <span ng-hide="addScreen">
                <input type="text" id="from" data-ng-model="message.screensId[$index+screensSize]" data-ng-change="ConvertToInt('sc',0,0)" />
                </span>
                </div>
                <div class="input-group">
                <span class="input-group-addon">Message Text:</span>
                <input type="text" name="name" class="form-control" ng-repeat="txt in message.text" data-ng-model="message.text[$index]" required>
                </div>
                <div class="input-group">
                <span class="input-group-addon">Message Images:</span>
                <input type="text" name="name" class="form-control" ng-repeat="img in message.images" data-ng-model="message.images[$index]" required>
                </div>
                <div class="input-group">
                <span class="input-group-addon">Message Template:</span>
                <input type="text" name="name" class="form-control" data-ng-model="message.template" required>
                </div>
                <div class="input-group">
                <span class="input-group-addon">Message Display Time:</span>
                <input type="text" name="name" class="form-control" data-ng-model="message.msgTime" required>
                </div>
                <div class="input-group" ng-repeat="time in message.timeFrame">
                <span class="input-group-addon">Message Time Frame:</span>
                Start Date:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].startDate" date-parser="shortDate" data-ng-change="ConvertToDate($index,'s')" data-ng-model-options="{debounce: 7000}" required>
                End Date:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].endDate" date-parser="shortDate" data-ng-change="ConvertToDate($index,'e')" data-ng-model-options="{debounce: 7000}" required>
                Day:<input type="text" name="name" class="form-control" ng-repeat="day in time.days" data-ng-model="message.timeFrame[$index].days" data-ng-change="ConvertToInt('d',$parent.$index,$index)" required>
                Start Houer:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].startTime" data-ng-change="ConvertToInt('st',0,$index)" required>
                End Houer:<input type="text" name="name" class="form-control" data-ng-model="message.timeFrame[$index].endTime" data-ng-change="ConvertToInt('en',0,$index)" required>
                </div>
            </div>
            <div class="row">
                    <div class="span12">
                        <button type="submit" class="btn btn-primary" data-ng-click="saveAdd()" ng-disabled="editForm.$invalid || !editForm.$dirty">{{buttonText}}</button>
                        &nbsp;&nbsp;
                    </div>
                    <div class="span12">
                        <button type="submit" class="btn btn-primary" data-ng-click="navigate('/messages')">{{cancelButton}}</button>
                        &nbsp;&nbsp;
                    </div>
            </div>
        </form>
    </div>
</div>

我正在谈论的地方是:开始日期和EndDate中的消息时间范围。 这些是我希望在用户完成他想要的日期后激活我的ng-change的地方。

我的控制器:

myApp.controller('EditMessageController',['$scope', '$routeParams', 'socket','$location','$timeout', function($scope, $routeParams, socket,$location,$timeout) {
    var msgEdit = MessageToEdit;
    $scope.addScreen = true;
    $scope.message, $scope.editMsg;
    $scope.buttonText = 'Save Changes';
    $scope.cancelButton = "Cancel";
    socket.emit('getMessage', msgEdit);
    socket.on('sendMessage', function(res) {
        $scope.message = res[0];
        initMsgDates($scope.message);
        $scope.screensSize = $scope.message.screensId.length;
    });
    $scope.saveAdd = function(){
        var bla = $scope.message.name;
    }
    $scope.navigate = function(url) {
            $location.path(url);
    };
    $scope.toggleScreen = function() {
        $scope.addScreen = $scope.addScreen === false ? true: false;
    };
    $scope.ConvertToInt = function(changed,parentIndex,index){
        if (changed=='sc'){
            $scope.message.screensId[$scope.screensSize] = parseInt($scope.message.screensId[$scope.screensSize]);
            $scope.screensSize++;
        }
        else if(changed=='d'){
            $scope.message.timeFrame[parentIndex].days[index] = parseInt($scope.message.timeFrame[parentIndex].days[index]);
        }
        else if (changed=='st'){
            $scope.message.timeFrame[index].startTime = parseInt($scope.message.timeFrame[index].startTime);
        }
        else{
            $scope.message.timeFrame[index].endTime = parseInt($scope.message.timeFrame[index].endTime);
        }
    };
    var inputChangedPromise;
    $scope.inputChanged = function(index,changed){
        if(inputChangedPromise){
            $timeout.cancel(inputChangedPromise);
        }
        inputChangedPromise = $timeout($scope.ConvertToDate(index,changed),8000);
    };
    $scope.ConvertToDate = function(index,changed){
        if (changed=='s'){
            $scope.message.timeFrame[index].startDate = new Date($scope.message.timeFrame[index].startDate);
        }
        else{
            $scope.message.timeFrame[index].endDate = new Date($scope.message.timeFrame[index].endDate);
        }
    };
}]);

您可能会看到ConvertToDate是我想在用户完成输入后激活的功能。 inputChanged是我试图在ng-change中激活以延迟ConvertToDate的功能,但它也没有成功。

0 个答案:

没有答案