使用AngularJS从服务器获取计算结果

Getting computation result from server with AngularJS

本文关键字：计算 结果 获取 服务器 AngularJS 使用      更新时间：2023-11-13

我实现了一个带有一组值的表单，例如可以逐步增加或减少的日期输入，以及一些行为相同的计数器。

每次我操作计数器时，都会计算这些输入的函数，并显示结果。我有两个选择：

  1. 当表单被操作时，使用AngularJS计算结果，当数据被发送到服务器时，再次重新计算。这意味着，我需要用Javascript编写函数，然后再用我用于API的任何语言编写
  2. 每次修改其中一个输入时，都会向服务器请求结果。例如，如果结果取决于数据库的状态，那么这可能是唯一可行的选择

如何实现第二个选项？我的初步方法是：

$scope.$watchGroup(['form.input1', 'form.input2', 'form.input3'], function() {
    $scope.result = $scope.recalc();
});
$scope.recalc = function() {
    $scope.evaluateRequest += 1;
    $scope.result = null;
    $http.post('/api/recalculation', {evaluate_request: $scope.evaluateRequest, input1: $scope.form.input1, input2: $scope.form.input2, input3: $scope.form.input3}).
        success(function(data, status, headers, config) {
            if ( data['evaluate_request'] != $scope.evaluateRequest )
                return
            $scope.result = data['result'];
        }).
        error(function(data, status, headers, config) {
            console.log('ERROR');
        });
};

也就是说，$watchGroup是要走的路吗？

您不需要使用$watchGroupBy，而$watch在监视深层对象方面有更好的功能。

通过查看您的代码，我认为您不需要更改哪个值。只有当表单的某个值发生更改时，才需要调用$scope.recalc()函数。

我建议使用$watch，它将监视整个对象form。任何值的变化，我们都会计算结果。

代码

$scope.$watch('form', function(newVal, oldVal) {
    if(newVal != oldVal) { //value change then do calculation.
       $scope.result = $scope.recalc();
    }
},true);

提到true会监视整个对象（深层变量），任何更改都会调用then函数并相应地重新计算值。

希望这能对你有所帮助。谢谢

相关文章：