Angular JS:如何获得ngclick函数的动态输入值

Question

我有一个html模板，它的输入具有动态id。这个输入元素的值用于确定应该向我的购物车添加多少项目。我的问题是，我不知道如何使用ngclick访问这个输入元素。

<div>
<div ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height:30em;">
<div class="container-fluid h-100" >
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
//This is the input that I need the value from.
<input id="{{'input-'+item.itemNo}}" class="addAmount" type="number"/> 
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
//this is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item,{{item.itemNo}})" type="button"value="Add to Cart"/> 
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

您需要使用ngModel指令，如下所示：

<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />

添加到购物车按钮必须以这种方式调用addItem函数：

<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />

参见本例：

(function() {
var app = angular.module("app", []);
app.controller("Controller", ["$scope", function($scope) {
$scope.$ctrl = {
items: [{
itemType: "floor",
itemName: "itemName 1",
itemDesc: "itemDesc 1",
itemNo: 1
}, {
itemType: "floor",
itemName: "itemName 2",
itemDesc: "itemDesc 2",
itemNo: 2
}]
};
$scope.addItem = function(item, itemNo) {
console.log(item, itemNo);
};
}]);
}());

.item {
border: #ccc solid 1px;
border-radius: 5px 5px;
height: 10em;
margin: 0.5em;
padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Controller">
<div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
// This is the input that I need the value from.
<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
// This is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

更新：如果需要获取输入数值，可以使用：document.getElementById(input-${itemNo})。

参见本例：

(function() {
var app = angular.module("app", []);
app.controller("Controller", ["$scope", function($scope) {
$scope.$ctrl = {
items: [{
itemType: "floor",
itemName: "itemName 1",
itemDesc: "itemDesc 1",
itemNo: 1
}, {
itemType: "floor",
itemName: "itemName 2",
itemDesc: "itemDesc 2",
itemNo: 2
}]
};
$scope.addItem = function(item, itemNo) {
let input = document.getElementById(`input-${itemNo}`);
if (input) {
console.log(input.value);
}
};
}]);
}());

.item {
border: #ccc solid 1px;
border-radius: 5px 5px;
height: 10em;
margin: 0.5em;
padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Controller">
<div class="item" ng-repeat="item in $ctrl.items|filter:{itemType:'floor'}" style="height: 10em;">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-6 h-100 ">
<div class="row prodImage h-100"></div>
</div>
<div class="col-sm-6 h-100">
<div class="row h-100 ">
<div class="col-sm-12 prodDesc h-50 paddingZero">
<div class="titleDiv">{{item.itemName}}</div>
<div class="descDiv">{{item.itemDesc}}</div>
</div>
<div class="col-sm-12 addToCart h-50 paddingZero">
<div class="row h-100 marginAuto">
<div class="col-sm-6 h-100 paddingZero">
<div class="addDiv">
// This is the input that I need the value from.
<input id="input-{{item.itemNo}}" class="addAmount" type="number" />
</div>
</div>
<div class="col-sm-6 h-100 paddingZero">
<div class="row marginAuto h-100">
<div class="col-sm-12"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
// This is where the ng-click function is
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>