CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Chuck Villavicencio
Chuck Villavicencio

Reputation: 393

How to change class of an element from ng-repeat?

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.

Upvotes: 0

Views: 180

Answers (1)

Chris Happy
Chris Happy

Reputation: 7295

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%">

Upvotes: 1

Related Questions