Question

我会创建一个类似于电子表格的webapp，当您更新一个单元格（输入）时，所有引用都会自动更新。

如何以角度实现这一目标？

例如：

<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库？

Answer 1

您可以使用$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();
        });
    });
}

Answer 2

您可以在输入框中添加ng-change事件，添加一个全局更新函数，以便在任何值发生变化时运行，而不是添加监视，如下面代码的更新示例所示：

fiddle

此更新功能可以像您想要的那样复杂或简单，例如传入引用，只添加（或操作）您传入的行或列中的输入单元格。

您也可以将所有单元格添加为数组，并使用ng-repeat

进行迭代

使用AngularJS制作电子表格（如）应用程序

2 个答案: