I have an html template with a input that has a dynamic id. The value from this input element is used to determine how much of an item should be added to my cart. My issue is that I cannot figure out how to access this input element using 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
You’ll need to use the ngModel directive, like this:
<input id="input-{{item.itemNo}}" class="addAmount" type="number" ng-model="item.itemNo" />
The Add to Cart button must be calling to addItem function in this way:
<input class="addToCartButton btn btn-success" ng-click="addItem(item, item.itemNo)" type="button" value="Add to Cart" />
See in this example:
(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>Update: If you need to get the input number value you could use: document.getElementById(input-${itemNo}).
See in this example:
(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>