我有以下代码,我通过ng-repeat
添加了5个输入文本,现在我正在尝试获取每个输入元素的值。我遇到了一些障碍,所以请帮我解决如何获取个人价值的问题。
HTML:
<form class="quick-add-form" method="post">
<label class="quick-add-label">Enter the catalog number and quantity</label>
<div class="quick-add">
<div class="catalog-list">
<label class="catalog-number-label" for="catalog-number-input">Catalog Number:</label>
<div ng-repeat="values in catalogNumber(number) track by $index">
<input id="catalog-number-input-{{$index}}" class="catalog-number-input"
type="text" ng-model="catalog.description" validate-input>
</div>
</div>
<div class="qnty-list">
<label class="pdt-qnty-label" for="pdt-qnty-input">Quantity:</label>
<div ng-repeat="values in catalogNumber(number) track by $index">
<input id="pdt-qnty-input-{{$index}}" class="pdt-qnty-input" type="number" pattern="[0-9]*"
inputmode="numeric" min="1" max="999" ng-model ="catalog.quantity" name="qty"
maxlength="3">
</div>
</div>
</div>
<div>
<button type="submit" class="btn btn-danger cta-button quick-add-btn"
ng-click ="quickAdd(catalog)">Add to List</button>
</div>
</form>
和控制器:
$scope.catalog = {};
$scope.catalogNumber = catalogNumber;
$scope.initializeModal = initializeModal;
$scope.quickAdd = quickAdd;
function catalogNumber(num) {
return new Array(num);
}
function quickAdd(val) {
console.log(val);
}
function init() {
$scope.number = 5;
$scope.catalog.quantity = 1;
}
我很确定它是因为索引,这就是为什么通过在一个输入中添加值,它一次性添加相同的值。但我不确定如何/在何处恰当地使用$index
来实现结果。
感谢。
答案 0 :(得分:1)
也许更好的方法是使用该模型?例如:
<div ng-repeat="values in catalogNumber(number) track by $index">
<input
id="catalog-number-input-{{$index}}"
class="catalog-number-input"
type="text"
ng-model="catalog.description[$index]"
validate-input>
</div>
现在在您的控制器中:
catalog.description = [];
然后你有一个对象数组,你可以在上面进行数学运算:
var total = _.sum(Object.values(catalog.description));
编辑:我忘了我在那里使用Lodash / Underscore,但是如果你想使用标准的JS,你可以使用独立的方法,或者减少等等。