Argthtjtr

I'm getting info from a json file and creating a table with the results. what i need to do is to change the class of one of the elements on a click.

this is part of my code:

$scope.firstAvailables = function(){

    $http.get('/app/json/products.json')

    .then(function(data){

        $scope.listOfProducts = data.data.products;

    }

The html view:

<table class="table">

   <thead>

       <tr>

          <th>Name</th>

          <th>Nickname</th>

          <th>Actions</th>

       </tr>

   </thead>

   <tbody>

       <tr ng-repeat="x in listOfProducts">

          <th><a class="one">{{x.name}}</th>

          <th><input type="text" class="form" id="theBox" value="1" style="width:40%"></th>

          <th><button type="button" class="btn btn-primary" ng-click="toChange(x)">Change</button></th>

       </tr>

   </tbody>

</table>

What i want to do is to change the class from the input on different rows (not all, just a few). For that, i'm using the next piece of code that lives inside of toChange(x) (which lives on the button):

$scope.toChange = function(val){



//to get the specific value

var specific = val;



//to create a new name for the class

var y = 'some-' + specific.name;



//with JQuery remove the previous class and add the new one

$('#theBox').removeClass('algo').addClass(y);



//With this i receive on the console all the input html tag

console.log(document.getElementById('theBox'));

    }

To here everything it's ok if i click on one row. But, if then i click on another, the class from the selected row, sum the name previous name and the new instead of replace:

console log from very first clicked element

<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">

console for the second element

<input type="text" class="algo-non algo-mollit" id="theBox" value="1" style="width:40%">

console for the next element

<input type="text" class="algo-non algo-mollit algo-liquit" id="theBox" value="1" style="width:40%">

What can i do to prevent the sum of the previous class names? The idea is to have on every click:

first click:

<input type="text" class="algo-non" id="theBox" value="1" style="width:40%">

second click:

<input type="text" class="algo-mollit" id="theBox" value="1" style="width:40%">

third click:

<input type="text" class="algo-liquit" id="theBox" value="1" style="width:40%">

I'm using AngularJs, Javascript and Jquery.

Thanx in advance.

The problem is that $('#theBox') is selecting all of the inputs.

1. First click: the class algo-non is added to all of the inputs.


2. Second click: the class algo-mollit is added to all of the inputs.


3. Third click: the class algo-liquit is added to all of the inputs.

Use id="theBox-{{ $index + 1 }}" or id="theBox-{{ item.name }}", then select the inputs individually.

// Guaranteed to be unique

<input type="text" class="form" id="theBox-{{ $index + 1 }}" value="1" style="width:40%">



// Risk duplicates (if items have same name)

<input type="text" class="form" id="theBox-{{ x.name }}" value="1" style="width:40%">