在ng重复中，PU TUPUT Bootstrap所需的字段

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需要在ng-repeat中验证

通过向其添加{{$ index}}来制作控制名称，并对其进行动态的所有引用，因此：

<tbody data-ng-repeat="package in packagingVm.Packages">
        <tr>
            <td>{{package.Id}}</td>
            <td class="col-xs-1">
<input name="Width_{{$index}}" 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_{{$index}}.$invalid && packagingVm.PackageForm.Width_{{$index}}.$touched || package.submitted">
                        <span ng-show="packagingVm.PackageForm.Width_{{$index}}.$error.required">Required.</span>
                    </div>

Answer 2

我可以看到的，您正在使用packagingVm.Packages的重复，但所需的零件取决于packagingVm.PackageForm。您应该拥有每个软件包（输入）的特定必需属性。否则，对于所有输入，控制器的一个属性已更改为所有必需的DIV的依赖。因此，它显示了所有输入。