javascript - 将模型属性直接绑定(bind)到 AngularJS 中另一个模型的计算属性？

Question

我刚开始用 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}
    ];

}

假设 subModel1 和 subModel2 的结果是它们项值的总和。

因此，subModel1 的总和为 4，subModel2 的总和为 10。

如何以编程方式将 mainModel[0].sum 绑定(bind)到 subModel1 以及 subModel2 的总和？

更新:刚刚找到 AngularJS Fundamentals in 60-ish Minutes通过 Dan Wahlin .一个漂亮的介绍，着重于核心概念。

Answer 1

如果你只需要 View 中的值，你可以在 $scope 上定义一个函数:

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

然后在你的 View 中使用它:

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

如果您需要更新mainModel，请按照@Tim 已经在评论中建议的方式进行操作——使用$watch es 在你的 Controller 中:

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

或者你可以看总和:

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