AngularJS使用每行上的更新按钮验证表行

时间:2015-06-30 21:17:50

标签: angularjs

我正在使用角度ng-repeat构建一个表格。我需要能够独立更新或删除每一行,因此需要独立验证每一行。

<tr ng-repeat="item in model.items" >
    <td><input type="text" ng-model="item.AccountNumber" ng-maxlength="model.validation.maxAccountLength" /></td>
    <td><select ng-model="item.OriginCountry" ng-options="country.Id as country.Name for country in model.OriginCountries"></select></td>
    <td><select ng-model="item.DestinationCountry" ng-options="country.Id as country.Name for country in model.DestinationCountries"></select></td>
    <td><input type="text" ng-model="item.Zone" ng-maxlength="4" /></td>
    <td><button type="button" ng-click="updateItem(item)" class="btn btn-warning" ><i class="fa fa-refresh"></i></button></td>
    <td><button type="button" ng-click="removeItem(item)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
</tr>

是否可以独立验证每一行

1 个答案:

答案 0 :(得分:-1)

尝试使用表单包装行内容,并将名称属性添加到输入/选择

<tr ng-repeat="item in model.items" >
<td>
 <form name="form">     
 <input name="account_number" type="text" ng-model="item.AccountNumber" ng-maxlength="model.validation.maxAccountLength" /></td>
<td>name="origin" ng-model="item.OriginCountry" ng-options="country.Id as country.Name for country in model.OriginCountries"></select></td>
<td><select name="destination" ng-model="item.DestinationCountry" ng-options="country.Id as country.Name for country in model.DestinationCountries"></select></td>
<td><input name="zone" type="text" ng-model="item.Zone" ng-maxlength="4" /></td>
<td><button type="button" ng-click="updateItem(item)" class="btn btn-warning" ><i class="fa fa-refresh"></i></button></td>
<td><button type="button" ng-click="removeItem(item)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
 </form>
 </td>
</tr>

现在您可以使用FormController状态,如form.$submittedform.zone.$touched

https://docs.angularjs.org/guide/forms