【问题标题】:AngularJs $watchGroup - which expression in the group was last changed?AngularJs $watchGroup - 组中的哪个表达式最后一次更改?
【发布时间】:2015-03-23 00:25:49
【问题描述】:

使用$watchGroup,如何确定组中的哪个表达式被更改了

    $scope.$watchGroup(['dec','bin','oct','hex'], function(newValues, oldValues, scope) {
       last_changed = ??? //return which exp was changed in this run...
       if(last_changed=='dec') //then something
       if(last_changed=='bin') //then something
       if(last_changed=='oct') //then something
       if(last_changed=='hex') //then something
    });


编辑1: -
--->问题是我无法将 n_vals 与 newValues 解除绑定。

var n_vals = [];
 $scope.$watchGroup(['dec','bin','oct','hex'], function(newValues, oldValues, scope) {
  last_updated = changed_one(newValues,n_vals); //last_updated EXP
    n_vals = newValues;
 });

解决方案:-

n_vals = angular.copy(newValues);

查看以下链接:
Deep copying objects in angular?

【问题讨论】:

    标签: javascript angularjs angularjs-service angularjs-watch


    【解决方案1】:

    Angular 提供$watchGroup (从 1.3 开始)

    基本上,它以我们在watchGroup 中的方式返回范围变量oldValuenewValue

    使用范围变量的索引来获取其各自的newValoldVal,如下所示。

    获取newValues 的各个作用域变量:

    newValue[0] // returns new value of dec
    newValue[1] // returns new value of bin
    newValue[2] // returns new value of oct
    newValue[3] // returns new value of hex
    

    获取oldValues 的各个作用域变量:

    oldValue[0] // returns old value of dec
    oldValue[1] // returns old value of bin
    oldValue[2] // returns old value of oct
    oldValue[3] // returns old value of hex
    
    $scope.$watchGroup(['dec','bin','oct','hex'], function(newValues, oldValues, scope) {
        console.log(newValues[index]); //put index value as 0(dec), 1(bin), 2(oct) or 3(hex)
        console.log(oldValues[index]); //put index value as 0(dec), 1(bin), 2(oct) or 3(hex)
    });
    

    注意:
    下面的逻辑是考虑一次只有一个值会改变。

    编辑 1

    要了解上次更新的变量,您可以尝试以下代码。

    var arrayOfValues = ['dec', 'bin', 'oct', 'hex'];
    $scope.$watchGroup(arrayOfValues, function(newValues, oldValues, scope) {
        let last_changed;
    
        var chanedIndex = newValues.findIndex(function(val, key){
            return val !== oldValues[key];
        });
    
        last_changed = arrayOfValues[chanedIndex];
    
        // above logic could simply avoid the below conditional logic (refer 
        // comment above in front of if condition)
        if (angular.isDefined(last_changed)) {
            // your logic will come here as per your question
            switch(last_changed){
               case 'dec':
                   doSomething();
               case 'bin':
                   doSomething();
               case 'oct':
                   doSomething();
               case 'hex':
                   doSomething();
            }
        }
    });
    

    编辑 2:

    我已经缩小了代码并制作了

    var arrayOfValues = ['dec', 'bin', 'oct', 'hex'];
    // generic method which will tell you which variable has been updated
    $scope.checkWhichVariableHasUpdated = fucntion(watchGroupList, newValuesObj, oldValuesObj) {
        let _lastUpdatedValue;
        angular.forEach(watchGroupList, function(value, index) {
            if (newValuesObj[index] != oldValuesObj[index])
                _lastUpdatedValue = value;
        });
        return _lastUpdatedValue;
    };
    
    $scope.mySwitchFunction = function(changedVariable) {
        switch (changedVariable) {
            case 'dec':
                doSomething();
                break;
            case 'bin':
                doSomething();
                break;
            case 'oct':
                doSomething();
                break;
            case 'hex':
                doSomething();
                break;
        }
    
    };
    
    $scope.$watchGroup(arrayOfValues, function(newValues, oldValues, scope) {
        var last_changed = $scope.checkWhichVariableHasUpdated(arrayOfValues, newValues, oldValues);
        if (angular.isDefined(last_changed)) {
            $scope.mySwitchFunction(last_changed)
        }
    });
    

    我希望这能解决问题。

    【讨论】:

    • @AhmedBadawy 我更新了我的答案..希望现在它可以消除你的疑虑
    • 非常感谢您的努力。但是如果我以相反的顺序填充arrayOfValues,上面的代码很容易被破坏。
    • 如果对您有帮助,请将答案标记为正确。谢谢。 :)
    • 对不起!如果我在 (hex) 之后更改 (dec) 的值怎么办。这将输出(十六进制)作为最后更改的值,尽管这不是真的
    • 对不起!没看到。有没有其他方法可以做 $watchGroup 而不是为每个元素创建一个 $watch。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多