puitting bootstrap Pflichtfelder in ng-repeat

Question

Ich habe eine Tabelle mit Paketen, die mit ng-repeat erstellt wurden. Ich verwende Bootstrap-Validierung. Es funktioniert gut auf Seiten, wo nur ein Datensatz eingegeben werden muss, aber hier habe ich es mit einem Repeater zu tun.

<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> 

Was passiert, ist die Zeilen sind miteinander verriegelt. Wenn ein Fehler in einer Zeile angezeigt wird, wird die Fehlermeldung in allen Zeilen angezeigt.

Ich meine, ich bekomme warum - ich habe nur eine packagingVm.PackageForm.Width, nicht eine pro Zeile - aber ich weiß nicht, wie es zu beheben ist.

Suche nach bootstrap erforderlich ng-repeat bringt mir nicht viel Freude.

Answer 1

Was ich sehen kann, verwenden Sie die Wiederholung für packagingVm.Packages, aber die erforderlichen Teile sind abhängig von packagingVm.PackageForm. Sie sollten die spezifischen erforderlichen Eigenschaften für jedes Paket (Eingabe) haben. Ansonsten wird für alle Eingaben eine Eigenschaft des Controllers geändert, von der alle erforderlichen divs abhängig sind. So zeigt es sich für alle Eingänge.

Answer 2

hier beantwortet:

AngularJS required field validation in ng-repeat

den Steuer Namen machen, und alle Verweise auf sie, dynamisch, durch Zugabe von {{$ Index}} es, also:

<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>