AngularJS:为什么 ng-model 值不在范围变量中更新 [英] AngularJS : Why ng-model value not updating in scope variable

问题描述

我正在使用 jquery timepicker 插件及其角度指令.当我从 javascript 重置范围值时，同时范围值不会更新.

I am using jquery timepicker plugin and its angular directive. When I reset the the scope values from javascript then for the same time scope value not updating.

我尝试对 timepicker 指令文件进行更改，但没有成功.

I have tried to make changes on timepicker directive file but not succeeded.

示例:- 选择开始时间 1:00AM 然后结束时间自动设置为 1:15AM，这是从 JS 文件中的 watch 函数更新的.现在单击重置，值将被删除或输入字段将为空白.现在再次选择同一时间 1:00AM 结束时间不会自动填充并且重置也不起作用.

Example:- Select start-time 1:00AM then end-time automatically sets to 1:15AM which is updated from watch function in JS file. Now click Reset and values would be deleted or input fields would be blank. Now again select the same time 1:00AM the end-time is not filled automatically and also Reset does not work.

但是如果我更改了之前选择的时间以外的时间，那行得通.

But that works If I change the time other than the previously selected time.

问题:- 重置输入字段中的值后看起来已填充，但不会在角度范围或模型上更新.但是，如果我通过 document.getElementById() 函数检查该值，则它会向我显示该输入字段内的值.那么为什么这些值没有在角度范围内更新.

Problem:- After reset value in input field looks populated but that is not updating on the angular scope or model. But if I check that value through document.getElementById() function then it is displaying me that value which is inside that input field. Then why those value are not updating in angular scope.

要求:-我想在用户点击重置后清空这些字段.当用户第二次选择同时"时，应在角度范围和模型中更新值.

Requirement:- I want to empty the fields after user click on reset. and for the second time when user select the "same time" the value should be updated in angular scope and model.

代码:-

 var app = angular.module('timePicker', ['ui.timepicker']);

app.controller('DemoCtrl',function($scope){
//$scope.startTime = new Date();
$scope.$watch('startTime', function (newValues, oldValues, scope) 
    {

        if( ($scope.startTime != undefined) &&  ($scope.startTime != null) && ($scope.startTime != '') )
            {
                $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                console.log($scope.startTime);
                console.log($scope.endTime);
            }   

    });

$scope.$watch('scope', function (newValues, oldValues, scope) 
    {
        console.log("Nothing here");
    });

$scope.resetTime = function()
{
  $scope.startTime = undefined;
  $scope.endTime = undefined;

}


});

我的 Plnker:-Plnker

使用的资源:-

https://github.com/jonthornton/jquery-timepicker 其 angular 指令位于 https://github.com/Recras/angular-jquery-timepicker.

https://github.com/jonthornton/jquery-timepicker whose directive in angular is on https://github.com/Recras/angular-jquery-timepicker.

推荐答案

问题

您不能在这种情况下使用 $scope.$watch，因为只要 $scope.startTime 调用 $scope.$watchcode> 值已更改，如果您选择 $scope.startTime 值是以前的值，则不会调用下面的代码.这就是您遇到此问题的原因

Problem

You cant use $scope.$watch for this condition, because the $scope.$watch is calling for whenever the $scope.startTime value is changed, If you select $scope.startTime value is a previous value, then this below code is not called.This is why you got this problem

if( ($scope.startTime !== undefined) &&  ($scope.startTime !== null) && ($scope.startTime !== '') )
                {
                    $scope.endTime =  new Date($scope.startTime.getTime() + (15*60*1000));

                    console.log($scope.startTime);
                    console.log($scope.endTime);
                }   

评论

这个问题只会发生在你之前的值上.一旦你改变了任何其他值，它就会运行良好.

Review

This issue only happen with your previous value.Once you change any other value then it's working good.

您需要在第一个文本字段中更改为 ng-blur 而不是 $scope.$watch.

You need change to ng-blur instead of $scope.$watch in your first text field.

我已经使用 ng-blur 解决了您的问题.请参阅此 Plunker

I have solved your issue by using ng-blur. Please see this Plunker

我的演示也有你的重置功能 :)祝你好运

这篇关于AngularJS:为什么 ng-model 值不在范围变量中更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！