在 ng-repeat 中更改 class 以获取输入值

Question

我正在使用 ng-repeat 创建 table。这个 table 有一个输入，人们可以在其中写任何东西。当我想获取所选输入的每个值时，我的问题就来了，因为只获取第一行：

<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 中更改 class 以获取输入值

change class inside of ng-repeat to get input value

javascript

angularjs

angularjs-ng-repeat