Question

我有一张由ng-repeat生成的包裹表。我正在使用bootstrap验证。它在只有一条记录需要输入的页面上工作正常，但在这里我处理的是转发器。

<form name="packingVm.PackageForm" ng-submit="packagingVm.ShipNow()" novalidate ng-init="submitted=false">
    <table>
        <thead>
            <tr>
                <th>Package Id</th>
                <th>Width</th>
            </tr>
        </thead>
        <tbody data-ng-repeat="package in packagingVm.Packages track by $index">
            <tr>
                <td>{{package.Id}}</td>
                <td class="col-xs-1">
                    <input name="Width" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
                    <div class="error-message" ng-show="packagingVm.PackageForm.Width.$invalid && packagingVm.PackageForm.Width.$touched || package.submitted">
                        <span ng-show="packagingVm.PackageForm.Width.$error.required">Required.</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</form>

发生的事情是行被锁定在一起。在一行上获取错误会在所有行上显示错误消息。

我的意思是，我明白了 - 我只有一个packagingVm.PackageForm.Width，而不是每行一个 - 但我不知道如何修复它。

搜索 bootstrap需要ng-repeat 并不会让我感到非常高兴。

Answer 1

在这里回答：

AngularJS required field validation in ng-repeat

通过向其添加{{$ index}}来使控件名称及其所有引用动态化，因此：

<?php 
 if($ticket_detail->attachment != null) 
 echo "<a href='".$ticket_detail->attachment."' download>Download</a>"; 
 else 
 echo '-';
?>

Answer 2

我可以看到，您使用packagingVm.Packages的重复，但所需的部分取决于packagingVm.PackageForm。您应该具有每个包（输入）的特定必需属性。除了所有输入之外，还改变了控制器的一个属性，所有必需的div都依赖于该属性。因此它显示了所有输入。

在ng-repeat中填充bootstrap所需的字段

2 个答案: