javascript - 将模型属性直接绑定到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到subModel1subModel2 的总和？

更新：Dan Wahlin刚刚在 60 分钟内找到了 AngularJS 基础知识。一个漂亮的介绍，侧重于核心概念。

Answer 1

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

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

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

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

如果您需要mainModel更新，请执行@Tim 在评论中已经建议的操作——在您的控制器中使用$watch es：

$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;
});