在动态创建的文本框中动态添加整数作为用户输入-Angular JS
Adding integers dynamically as user inputs in dynamically created textboxes - Angular JS
我刚刚开始学习Angular JS,想创建一个简单的计算器。首先要求用户输入操作数。在此之后,我想显示用于输入操作数的大量文本框。以下是html(这不是计算器的完整代码):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="myCalc">
<head>
<meta charset="utf-8" />
<title>Calculator</title>
</head>
<body ng-controller="FormController">
<h3><em>Do your calculations here!!</em></h3>
<div>
<p>Enter number of operands : <input type="number" ng-model="paramCount" name="count" ng-change="getNumber(paramCount)"/></p>
<p ng-repeat="i in getNumber(paramCount)">Enter the operand : <input type="text" ng-model="numbers"/></p>
<p><button ng-click="reset()">Reset</button></p>
</div>
</body>
</html>
下面是脚本:
<script src="angular.min.js"></script>
<script>
var myCalcApp = angular.module('myCalc', []);
myCalcApp.controller('FormController', function ($scope) {
$scope.paramCount = 0;
$scope.getNumber = function (num) {
array = [];
for (i = 1; i <= num; i++) {
array.push(i)
}
return array;
}
$scope.reset = function () {
$scope.paramCount = 0;
};
});
</script>
我习惯于将用户输入绑定到任何模型,并使用它来计算总和。
非常感谢您的帮助。
谢谢。
一种解决方案是:
1) 在控制器中创建一个操作数数组。
示例:$scope.operations=[];
2) 在您的"$scope.getNumber"函数中初始化它
3) 更改此ng模型:
<input type="text" ng-model="numbers"/>
由这个:
<input type="text" ng-model="operands[$index]"/>
我希望我的答案适合你。
一些有用的文档:https://docs.angularjs.org/api/ng/directive/ngRepeat
相关文章:
- d3基于用户选择动态更新节点
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 当用户点击动态创建的链接时,如何调用JS方法.JQuery,ASP.NET MVC
- 将一行添加到用户动态创建的特定表中
- 如何根据用户选择动态更改多个复选框的编号
- 如何根据用户输入的数字动态地向表单添加文本字段
- 使用动态用户输入在 HTML5 中创建画布多边形
- 如何使移动用户可点击动态电话号码
- 使用用户输入动态转换数据(Highcharts,JavaScript,Django)
- 尝试在Javascript中嵌套基于用户输入的动态生成的JSON
- 用户输入的动态表,单元格id作为网格引用
- NodeJS+JS:根据当前用户选择生成动态链接
- 具有用户文本字段输入的动态画布
- 使用用户选择动态更新页面
- 表格报告-动态比较特定用户的输入日期和现有日期
- 如何使直方图中的标签对动态用户输入做出响应
- 如何使用Javascript获取HTML动态用户输入的值
- 使用handlebars.js处理动态用户内容
- 操纵动态用户输入表的意外行为
- 根据数据库中保存的设置呈现动态用户界面