CODEWITHSUNDEEP
javascriptphphtmlangularjs
Prudhvi Kanakala
Prudhvi Kanakala

Reputation: 9

Increment or Decrement text box value(not attribute) within a loop

There are input tags in a loop for 39 times like below

for (i = 0; i <= 39; i++) {
document.write("<button id='minus'>-</button><input type='text' id='input' value='0' ng-model='number" + i + "'><button id='plus'>+</button><br><br>");
};

let pb = document.getElementById("plus");
let mb = document.getElementById("minus");
let text = document.getElementById("input");

pb.onclick = function() {
let x = text.getAttribute("value");
text.setAttribute("value", ++x);
};

mb.onclick = function() {
let x = text.getAttribute("value");
if (x >= 1) {
text.setAttribute("value", --x);
};
};

but the thing I need is to increment/decrement textbox value with that specific ng-model number when I click the buttons beside in a loop.

And also those text boxes giving information to "Total" textbox above where it displays addition of all the values in the text boxes. so just updating value attribute not working, a bit angular involved, so please help me to solve this problem.

(dev.pfokus.com/product/caponi) open this url and select product, quantity and it will take you to colors selection, observe the console how its behaving. write some number in the color box and total field gets updated. please do check the console and help me in how to solve the issue of adding +/- buttons.

(justpaste.it/5tbwj) this is the code in directives of angular js in my webiste directory. this is what taking input values from the text box, please try to trigger this with +/- buttons.

These are images of console when I added "1" to a textbox and when I added "2" to the same textbox through keyboard input.

enter image description here

enter image description here

Thanks in advance :)

Upvotes: 0

Views: 840

Answers (1)

Prasad Wargad
Prasad Wargad

Reputation: 765

Have a look at JSFiddle: https://jsfiddle.net/dLuzemrx/

I am also new to Angular JS, did just the working required in question. Any optimisation or corrections, please feel free to do it.

JS Code: 

var dataHTML = "";
for (i = 0; i <= 39; i++) {
    dataHTML += '<button ng-click="value_'+ i +' = value_'+ i +' - 1">-</button><input ng-value="value_'+ i +'"><button ng-click="value_'+ i +' = value_'+ i +' + 1">+</button><br><br>';
}
document.querySelector('[ng-app="myApp"]').innerHTML = dataHTML;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myVar = "Hello World!";
    for (i = 0; i <= 39; i++) {
        $scope['value_'+ i] = 1;
    }
});

Upvotes: 0

Related Questions