我想在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>
答案 0 :(得分:1)
不起作用。
以下是解决方案:
<!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>
&#13;