Question

这是我的html代码段：

<tr ng-repeat="row in rowCollection">
  <td><h6 id="{{$index}}">{{row.inventory_serialno}}</h6></td>
</tr>

<div class="form-group">
  <label for="inventory_serialno">SL No:</label>
  <input class="form-control" value="//I need the value of h6 here//" id="inventory_serialno" placeholder="Enter serial number">
</div>

目标：

获取ng-repeat内元素的值（在这种情况下，每行的'h6'标记值）
使用该对应值自动填充每行中存在的相应文本框输入的值。

输入文本框不在ng-repeat范围内出于某种原因，如果我这样做，我就无法访问h6标签的值（给出一个值null）

document.getElementById("1").innerHTML; //or even text()

奇怪的是我注意到上面的JavaScript代码在浏览器控制台上运行良好但在我的脚本上运行不正确（这意味着它与角元素生成时间有关。可能是我在它生成之前访问它）。

尽管如此，有人可以对解决方案有所了解。提前谢谢。

********更新了控制器代码*****

app.controller('InventoryCtrl', function ($scope) {

    var x = document.getElementById("1").innerHTML; // giving a null value
    console.log(x); 

    $scope.rowCollection = [{
        id: 100,
        inventory_serialno: 'HW13FGL'
      }, {
        id: 101,
        inventory_serialno: 'SM123GH'
      }, {
        id: 102,
        inventory_serialno: 'LK90100'
      }];
});

Answer 1

你可以这样做：

<input value="{{rowCollection[2].inventory_serialno}}" />

Example

但是我会将输入放在ng-repeat中以保持其清洁，并在一个大包装器中实现您喜欢的布局，如下所示：

<div class="grid" ng-repeat="row in rowCollection">
  <div class="col">
    <h6 id="{{$index}}">{{row.inventory_serialno}}</h6>
    <hr>
    <div class="form-group">
      <form>
        <input value="{{row.inventory_serialno}}"/>
      </form>
    </div>
  </div>
</div>

如果您需要输入每个项目，请使用ng-repeat。

获取ng-repeat中元素的值

1 个答案: