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，同时使用循环索引将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来获取单个输入字段。

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

1 个答案: