AngularJS - 文本框上的级联绑定答案

【问题标题】：AngularJS - cascade binding on textboxesAngularJS - 文本框上的级联绑定
【发布时间】：2015-02-25 16:45:44
【问题描述】：

我想用 Angular 在文本框中进行级联操作。假设我在现有文本框中有 4 个数字，我想：

将第一个文本框中的前两个数字相加
在第二个文本框中将接下来的两个数字相加
在第三个文本框中将两个结果相加

这是我想做的 HTML 示例。我知道它不起作用，但我正在寻找最优雅的问题解决方案。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularTest</title>
</head>
<body ng-app>
    <form>
        <fieldset>
            <label for="first">Tag100</label>
            <input type="number" id="first" min="0" ng-model="tag100" placeholder="0" /><br/>
            <label for="second">Tag200</label>
            <input type="number" id="second" min="0" ng-model="tag200" placeholder="0" /><br/>
            <label for="third">Tag300</label>
            <input type="number" id="third" min="0" ng-model="tag300" placeholder="0" /><br/>
            <label for="fourth">Tag400</label>
            <input type="number" id="fourth" min="0" ng-model="tag400" placeholder="0" /><br/>
            <label for="onetwo">Tag 500 = Tag100 + Tag200</label>
            <input type="number" id="onetwo" min="0" ng-model="tag500" placeholder="0" value="{{tag100+tag200}}"/><br/>
            <label for="threefour">Tag 600 = Tag300 + Tag400</label>
            <input type="number" id="threefour" min="0" ng-model="tag600" placeholder="0" value="{{tag300+tag400}}"/><br/>
            <label for="fivesix">Tag 700 = Tag500 + Tag600</label>
            <input type="number" id="fivesix" min="0" ng-model="tag700" placeholder="0" value="{{tag500+tag600}}" /><br/>
        </fieldset>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

【问题讨论】：

标签： angularjs binding

【解决方案1】：

当提供 ng-model 时，

将不起作用。

解决办法如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularTest</title>
</head>
<body ng-app="myApp">
    <form data-ng-controller="AppCtrl">
        <fieldset>
            <label for="first">Tag100</label>
            <input type="number" id="first" min="0" ng-model="tag100" placeholder="0" /><br/>
            <label for="second">Tag200</label>
            <input type="number" id="second" min="0" ng-model="tag200" placeholder="0" /><br/>
            <label for="third">Tag300</label>
            <input type="number" id="third" min="0" ng-model="tag300" placeholder="0" /><br/>
            <label for="fourth">Tag400</label>
            <input type="number" id="fourth" min="0" ng-model="tag400" placeholder="0" /><br/>
            <label for="onetwo">Tag 500 = Tag100 + Tag200</label>
            <input type="number" id="onetwo" min="0" ng-model="tag500" placeholder="0" /><br/>
            <label for="threefour">Tag 600 = Tag300 + Tag400</label>
            <input type="number" id="threefour" min="0" ng-model="tag600" placeholder="0" /><br/>
            <label for="fivesix">Tag 700 = Tag500 + Tag600</label>
            <input type="number" id="fivesix" min="0" ng-model="tag700" placeholder="0" /><br/>
        </fieldset>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>

    angular.module('myApp', [])
    .controller('AppCtrl', function ($scope) {
        $scope.$watch(function () {
            $scope.tag500 = ($scope.tag100 || 0) + ($scope.tag200 || 0);
            $scope.tag600 = ($scope.tag300 || 0) + ($scope.tag400 || 0);
            $scope.tag700 = ($scope.tag500 || 0) + ($scope.tag600 || 0);
        })
    });

</script>
</body>
</html>

【讨论】：

感谢您提供有效的解决方案。我需要有成百上千个这样的字段（非常大的形式）。 scope.watch 会影响性能吗？
是的。当然。对于每个按键，该功能将被触发。在docs.angularjs.org/api/ng/directive/ngModelOptions 阅读有关 ng-model-options 的信息