javascript - 更改 ng-repeat 内部的类以获取输入值

Question

我正在使用 ng-repeat 创建一个表。该表有一个输入，人们可以在其中写入任何内容。当我想获取所选输入的每个值时，我的问题就出现了，因为只获取第一行:

<table class="table">
    <thead>
    <tr>
        <th style="text-align:center">Name</th>
        <th style="text-align:center">LastName</th>
        <th style="text-align:center;width:200px">Write a funny commentary</th>
        <th style="text-align:center">Save</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in myItems">
        <th style="font-weight:normal;text-align:center">{{item.name}}</th>
        <th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
        <th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
            <input type="text" class="form-control" id="theBox">
        </th>
<th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">  
<button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
</th>
            </tr>
            </tbody>
        </table>
</tbody>
</table>

我知道所有返回值的输入都获得相同的 id。有没有办法获取任何创建的行的特定数据？即使我尝试过 querySelectorAll() 但不起作用:

$scope.textOfValue = function(t){
        $scope.theValue = t;
        //to get the specific data of row

        var xandria = document.querySelectorAll("#boxOf"), k, length;

        for(k = 0, length = xandria.length; k < length; k++){
            xandria[k].classList.add('form-control.x');
        }

        $scope.getText = document.getElementById('theBox').value;
        console.log($scope.getText);

    }

有人建议解决方案在这里 prototypical inheritance in AngularJS? ，但到目前为止我还完全不明白......你能帮我举个例子吗？

我正在使用 AngularJs 和 Javascript。

提前致谢。

Answer 1

您遇到此问题是因为 ng-repeat 一次又一次地创建具有相同 id 的输入。您应该使用 trackBy 获取索引并将该索引应用于 InputField Id，同时使用循环索引绑定(bind)您的 ng-Model。

例如:

<tr ng-repeat="item in myItems track by $index">
    <th style="font-weight:normal;text-align:center">{{item.name}}</th>
    <th style="font-weight:normal;text-align:center">{{item.lastName}}</th>
    <th style="font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
        <input type="text" class="form-control" id="theBox-{{$index}}" ng-model="newInputValue[$index].value>
                                </th>
<th style=" font-weight:normal;text-align:center;padding-left: 15px;padding-right: 15px;">
        <button type="button" class=btn btn-primary ng-click="saveComment(item)">Save</button>
    </th>
</tr>

现在，您已经有了 newInputValue 数组，您可以使用索引访问它。它将创建新对象。另外，如果您尝试通过 ID 访问输入字段，则可以使用 $index 来获取单个输入字段。