Как передать значение или идентификатор ng-repeat моему добавленному элементу?Это возможно?

Question

У меня есть таблица повторений с 5 данными из моего запроса выбора и условие на мои данные.Я просто хочу получить значение и идентификатор ng-repeat и перенести его в мой добавленный элемент.Я новичок в Angularjs и HTML, надеюсь, вы, ребята, можете помочь.Ценю большую помощь.

Это мой HTML:

<table class="table table-bordered kl">
   <thead>
      <tr>
         <th>ID</th>
         <th>VALUE</th>
      </tr>
   </thead>

   <tbody>
      <tr ng-repeat="d in mySelectData">
         <td>{{d.ID}}</td>
         <td>{{d.VALUE}} <p id="dataColor">Color</p> </td>
      </tr>
   </tbody>
</table>

Вот мой контроллер:

if(interval == 2000) {
    $('#dataColor').empty();
    $('#dataColor').append('<label> the color is {{d.VALUE}}</label>'
else {
    $('#dataColor').empty();
    $('#dataColor').append('<label> the color will be changed!</label>'
}

Вывод должен быть: (в моей первой загрузке)

+--------+-----------+
|   ID   |   Value   |
+--------+-----------+
|   1    |   black   |
+--------+-----------+
|   2    |   red     |
+--------+-----------+
|   3    |   blue    |
+--------+-----------+
|   4    |   white   |
+--------+-----------+
|   5    |   red     |
+--------+-----------+

(в моей 2-й загрузке или после 2 сек)

+--------+-----------------------------+
|   ID   |   Value                     |
+--------+-----------------------------+
|   1    |   black  the color is black |
+--------+-----------------------------+
|   2    |   red    the color is red   |
+--------+-----------------------------+
|   3    |   blue   the color is blue  |
+--------+-----------------------------+
|   4    |   white  the color is white |
+--------+-----------------------------+
|   5    |   red    the color is red   |
+--------+-----------------------------+

наконец

+--------+-------------------------------------+
|   ID   |   Value                             |
+--------+-------------------------------------+
|   1    |   black  the color will be changed! |
+--------+-------------------------------------+
|   2    |   red    the color will be changed! |
+--------+-------------------------------------+
|   3    |   blue   the color will be changed! |
+--------+-------------------------------------+
|   4    |   white  the color will be changed! |
+--------+-------------------------------------+
|   5    |   red    the color will be changed! |
+--------+-------------------------------------+

Answer 1

Вы можете использовать [атрибуты данных] [1]

Добавить атрибут данных в html:

<tr ng-repeat="d in mySelectData">
    <td>{{d.ID}}</td>
    <td>{{d.VALUE}} <p id="dataColor-{{$index}}" class="js-color-change" data-color="{{d.VALUE}}">Color</p> </td>
</tr>

Получить значения из атрибутов данных в JS

внутри вас, если условия вы можете запросить, используя class вместо этого, если id и изменить значения с помощью атрибутов данных

Answer 2

Вы можете попробовать что-то вроде приведенного ниже кода. Также, пожалуйста, проверьте эту ссылку на ссылку для данного сценария работы.

Контроллер:

  $scope.mySelectData = [{
    ID: 1,
    VALUE: 'black'
  }, {
    ID: 2,
    VALUE: 'red'
  }, {
    ID: 3,
    VALUE: 'blue'
  }, {
    ID: 4,
    VALUE: 'white'
  }, {
    ID: 5,
    VALUE: 'green'
  }];
  $timeout(function(){
    angular.forEach($scope.mySelectData, function(item){
      item.MESSAGE = "the color is " + item.VALUE;
    });
  }, 2000);
  $timeout(function(){
    angular.forEach($scope.mySelectData, function(item){
      item.MESSAGE = "the color will be changed!";
    });
  }, 4000);

Шаблон:

    <table border="1">
      <thead>
          <tr>
            <th>ID</th>
            <th>VALUE</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="d in mySelectData">
            <td>{{d.ID}}</td>
            <td>{{d.VALUE}} {{d.MESSAGE}} </td>
          </tr>
      </tbody>
    </table>

Answer 3

Во-первых, вам нужно изменить идентификатор «dataColor» на класс «dataColor», потому что идентификатор не повторяется.

if(interval == 2000) {
    $('.dataColor').empty();
    $('.dataColor').append('<label> the color is {{d.VALUE}}</label>'
else {
    $('.dataColor').empty();
    $('.dataColor').append('<label> the color will be changed!</label>'
}