I am currently utilizing AngularJS instead of Angular and I am looking to implement a corresponding textbox next to the dynamic select box.
Below is my code for dynamically adding select boxes:
HTML
<div ng-controller='MyController'>
<div ng-repeat="addon in product_addons track by $index">
<select
ng-model="addon.id"
options="products"
ng-options="product.id as product.name for product in products"
ng-disabled="product_addons.length > 1 && product_addons.length > $index + 1">
</select>
<input type="number" name="quantity">
<button type="button" ng-click="addAddons($index)">-</button>
</div>
<button type="button" ng-click="removeAddon()">Add Product to Addon</button>
</div>
AngularJS
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.products = [
{id: 1, name: 'prod1', price: 100},
{id: 2, name: 'prod2', price: 100},
{id: 3, name: 'prod3', price: 100}
];
$scope.product_addons = [{}];
$scope.addAddons = function(){
$scope.product_addons.push({});
}
$scope.removeAddon = function(index){
$scope.product_addons.splice(index,1);
}
}
My goal is to include dynamic quantity input fields for each added dynamic select box