使用AngularJS制作电子表格(如)应用程序

时间:2016-05-11 13:09:46

标签: javascript angularjs

我会创建一个类似于电子表格的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库?

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

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

fiddle

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

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

进行迭代