Как изменить класс элемента из ng-repeat?

Question

Я получаю информацию из файла json и создаю таблицу с результатами. что мне нужно сделать, это изменить класс одного из элементов одним щелчком мыши.

это часть моего кода:

$scope.firstAvailables = function(){
    $http.get('/app/json/products.json')
    .then(function(data){
        $scope.listOfProducts = data.data.products;
    }

Просмотр HTML:

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

Что я хочу сделать, это изменить класс из входных данных в разных строках (не во всех, только в нескольких). Для этого я использую следующий фрагмент кода, который находится внутри toChange(x) (который находится на кнопке):

$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'));
    }

Здесь все нормально, если я нажму на одну строку. Но, если затем я щелкну по другому, классу из выбранной строки, суммируем имя предыдущее имя и новое вместо замены:

журнал консоли с самого первого нажатого элемента

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

консоль для второго элемента

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

консоль для следующего элемента

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

Что я могу сделать, чтобы предотвратить суммирование имен предыдущих классов? Идея состоит в том, чтобы иметь на каждый клик:

первый клик:

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

второй клик:

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

третий клик:

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

Я использую AngularJs, Javascript и Jquery.

Спасибо заранее.

Answer 1

Проблема в том, что $('#theBox') выбирает все входы.

1. Первый щелчок: класс algo-non добавляется к всем входам.
2. Второй щелчок: класс algo-mollit добавляется к всем входам.
3. Третий щелчок: класс algo-liquit добавляется к всем

Используйте id="theBox-{{ $index + 1 }}" или id="theBox-{{ item.name }}", затем выберите входы по отдельности.

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