使用AngularJS制作一个类似电子表格的应用程序

Use AngularJS to make a spreadsheet (like) application

本文关键字：一个 电子表格 应用程序 AngularJS 使用      更新时间：2023-09-26

我会制作一个类似电子表格的网络应用程序，当你更新一个单元格（输入）时，所有引用都会自动更新。

如何在角度上实现这一点？

例如：

<div ng-app ng-controller="TestController">
   <input ng-model="a1" /><input ng-model="b1" /><br />
   <input ng-model="a2" /><input ng-model="b2" />
</div>
function TestController($scope) {
   $scope.a1 = "";   
   $scope.a2 = "";   
   $scope.b1 = "";   
   $scope.b2 = $scope.a1 + $scope.a2;
}

https://jsfiddle.net/Lt7aP/2622/

问题是B2是第一次评估的，但当a1或a2改变时，它不会自动改变。

下面的答案是正确的，但我正在寻找一种有效的方法。Angular是否有任何库可以处理这种"反应式编程"？

您可以使用$scope.$watch来执行类似的操作

function TestController($scope) {
    $scope.a1 = "1";   
    $scope.a2 = "2";   
    $scope.b1 = "";   
    $scope.b2 = $scope.a1 + $scope.a2;
    $scope.b2_eval = function() {
            $scope.b2 = $scope.a1 + $scope.a2;
    }
    $scope.b2_deps = ['a1', 'a2'];
    $scope.b2_deps.forEach(function(dep) {
        $scope.$watch(dep, function() {
            $scope.b2_eval();
        });
    });
}

您只需在输入框中添加一个ng-change事件，并添加一个全局更新函数即可在任何值更改时运行，而无需添加手表，如下面代码的更新示例所示：

小提琴

这个更新函数可以是你想要的复杂或简单的，比如传递引用，只添加（或操作）你传递的行或列中的输入单元格

您也可以将所有单元格添加为一个数组，并使用ng-repeat 进行迭代

相关文章：