Question

我有ng个重复表，其中包含来自选择查询的5个数据，并以我的数据为条件。我只想获取ng-repeat值和ID并将其传输到我的附加元素。我是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秒后）

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

首先，您需要将ID“ dataColor”更改为“ dataColor”类，因为ID不重复。

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

Answer 2

您可以使用[数据属性] [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>

Retrieve values from data attributes in JS

如果您有条件，可以在内部使用class进行查询，而在id中进行查询，并使用数据属性更改值

Answer 3

您可以尝试使用类似以下代码的方法，也请为给定的场景工作示例检查此plinker link。

控制器：

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

如何将ng-repeat值或ID传递给我的附加元素？这可能吗？

3 个答案: