从 angularJs 中动态创建的输入中查找总数
Find total from inputs which are created by dynamically in angularJs
我正在 angularJs 中动态创建输入元素组。我想找到总数,
控制器,
$scope.itemElements = [
{
"item": "item1",
"quantity": 2,
"rate": 12.5
},
{
"item": "item2",
"quantity": 2,
"rate": 12.5
},
{
"item": "item3",
"quantity": 2,
"rate": 12.5
}
];
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements["quantity"];
}
return sum;
}
HTML,
<tr ng-repeat="itemElemen in itemElements">
<td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
<td><input type="text" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
<td><input type="text" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
<td><input type="text" class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
</tr>
总计,
Total <span id="totalSum" ng-model="calculateSum()"></span>
它不起作用,出现错误 [ngModel:nonassign]
,我该怎么做?
您的代码中有一些错误。
首先,<span id="totalSum" ng-model="calculateSum()"></span>
- 此代码无效,此处出现错误。
更好的方法是使用 2-way-data-binding 按值输出:
Total <span id="totalSum">{{calculateSum()}}</span>
之后,在你的函数中calculateSum()
你有一个错误
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements[i]["quantity"];
// ^
// Here
}
return sum;
}
您需要引用数组中的元素$scope.itemElements
之后,更好的方法是使用 input:number
而不是 input:text
对于您真正知道的模型是 Number
s
最后一个 input
for Amount
最好是 disabled
.
最后,获取下一个代码。
HTML:
<table>
<tr ng-repeat="itemElemen in itemElements">
<td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
<td><input type="number" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
<td><input type="number" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
<td><input type="number" disabled class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
</tr>
</table>
Total <span id="totalSum">{{calculateSum()}}</span>
JS:
$scope.itemElements = [
{
"item": "item1",
"quantity": 2,
"rate": 12.5
},
{
"item": "item2",
"quantity": 2,
"rate": 12.5
},
{
"item": "item3",
"quantity": 2,
"rate": 12.5
}
];
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements[i]["quantity"];
}
return sum;
}
演示:http://plnkr.co/edit/k2zrbNcMXwPhNcflV3yF?p=preview
我正在 angularJs 中动态创建输入元素组。我想找到总数, 控制器,
$scope.itemElements = [
{
"item": "item1",
"quantity": 2,
"rate": 12.5
},
{
"item": "item2",
"quantity": 2,
"rate": 12.5
},
{
"item": "item3",
"quantity": 2,
"rate": 12.5
}
];
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements["quantity"];
}
return sum;
}
HTML,
<tr ng-repeat="itemElemen in itemElements">
<td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
<td><input type="text" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
<td><input type="text" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
<td><input type="text" class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
</tr>
总计,
Total <span id="totalSum" ng-model="calculateSum()"></span>
它不起作用,出现错误 [ngModel:nonassign]
,我该怎么做?
您的代码中有一些错误。
首先,<span id="totalSum" ng-model="calculateSum()"></span>
- 此代码无效,此处出现错误。
更好的方法是使用 2-way-data-binding 按值输出:
Total <span id="totalSum">{{calculateSum()}}</span>
之后,在你的函数中calculateSum()
你有一个错误
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements[i]["quantity"];
// ^
// Here
}
return sum;
}
您需要引用数组中的元素$scope.itemElements
之后,更好的方法是使用 input:number
而不是 input:text
对于您真正知道的模型是 Number
s
最后一个 input
for Amount
最好是 disabled
.
最后,获取下一个代码。
HTML:
<table>
<tr ng-repeat="itemElemen in itemElements">
<td><input type="text" class="form-control" ng-model="itemElemen.item" placeholder="Enter item" list="clientList"/></td>
<td><input type="number" class="form-control" ng-model="itemElemen.quantity" placeholder="Quantity"/></td>
<td><input type="number" class="form-control" ng-model="itemElemen.rate" placeholder="Rate"/></td>
<td><input type="number" disabled class="form-control" placeholder="Amount" ng-value="itemElemen.quantity*itemElemen.rate"/></td>
</tr>
</table>
Total <span id="totalSum">{{calculateSum()}}</span>
JS:
$scope.itemElements = [
{
"item": "item1",
"quantity": 2,
"rate": 12.5
},
{
"item": "item2",
"quantity": 2,
"rate": 12.5
},
{
"item": "item3",
"quantity": 2,
"rate": 12.5
}
];
$scope.calculateSum = function ()
{
var sum = 0;
for (var i = 0; i < $scope.itemElements.length; i++)
{
sum += $scope.itemElements[i]["quantity"];
}
return sum;
}