Javascript 将模型属性直接绑定到AngularJS中另一个模型的计算属性？

我刚刚开始创建一个小项目

由于结构原因，我想将我的模型分解为几个子模型，如下所示：

var myCtrl = function ($scope) {

    $scope.mainModel = [
        {modelTitle:'learn angular', sum:0},
        {modelTitel:'build an angular app', sum:0}
    ];

    $scope.subModel1 = [
        {item:'learn angular', value:2},
        {item:'build an angular app', value:2}
    ];

    $scope.subModel2 = [
        {item:'learn angular', value:5},
        {item:'build an angular app', value:5}
    ];

}

假设

子模型1

和

子模型2

的结果是其项目值的总和

因此，

子模型1

的和为4，

子模型2

的和为10

如何以编程方式将

mainModel[0].sum

绑定到

subModel1

和subModel2的总和？

---

更新：刚被找到。这是一篇漂亮的介绍，重点介绍了核心概念

如果只需要视图中的值，可以在$scope上定义函数：

$scope.mainSum = function() {
    return $scope.subModel1[0].value + $scope.subModel2[0].value;
}

然后在您的视图中使用它：

<div>main sum = {{mainSum()}}</div>

或者你也可以看一下总数：

$scope.$watch(function() {
    return $scope.subModel1[0].value + $scope.subModel2[0].value;
 }, function(value) {
    $scope.mainSum[0].sum = value;
});

---

您可以设置$watch函数来监视这些值，当它们发生变化时，您可以更新mainModel。在视图中使用计算值对我来说已经很简单了。事实上，我还没有意识到有观察者。谢谢！

$scope.$watch(function() {
    return $scope.subModel1[0].value + $scope.subModel2[0].value;
 }, function(value) {
    $scope.mainSum[0].sum = value;
});