我有一张表在每个<input>
充满<td>
字段,在ng-repeat
重复。在某些情况下,一些输入可能带有null
值。我想访问ng-model
值,以检测用户何时更改ng-model
中!=null
的值以启用按钮来处理服务器中的数据。那是ng-repeat
中的代码:
<tbody>
<tr ng-repeat="data in resultValue=(vm.ExcelDataDialog) | filter: FilterNullData" class="fade">
<td style="min-width: 2px !important;width:2px !important">{{$index + 1}}</td>
<td>
<input type="text" ng-model="data.Pershkrimi" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.Pershkrimi != null, input_red: data.Pershkrimi == null}" />
</td>
<td>
<input type="text" ng-model="data.Klienti" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.Klienti != null, input_red: data.Klienti == null}" />
</td>
<td>
<input type="text" ng-model="data.KodiArtikullit" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.KodiArtikullit != null, input_red: data.KodiArtikullit == null}" />
</td>
<td>
<input type="number" ng-model="data.Sasia" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.Sasia != null, input_red: data.Sasia == null}" />
</td>
<td>
<input type="number" ng-model="data.Cmimi" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.Cmimi != null, input_red: data.Cmimi == null}" />
</td>
<td>
<input type="text" ng-model="data.DateFillimi" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.DateFillimi != null, input_red: data.DateFillimi == null}" />
</td>
<td>
<input type="text" ng-model="data.DateMbarimi" ng-model-options="{ 'updateOn': 'blur' }" ng-class="{validate_for_creating_new_ofer: data.DateMbarimi != null, input_red: data.DateMbarimi == null}" />
</td>
</tr>
</tbody>
我检查控制器中的数据是否为空,但我想检查它们在视图中的归档时间以启用该按钮。有按钮代码:
<md-button type="submit" id="create_offer"
ng-click="vm.AddOfferByImportingExcel()"
class="send-button md-accent md-raised"
aria-label="krijo_oferte"
ng-disabled = "data.Pershkrimi == null">
Krijo ofertë
</md-button>
如果任何值为null / empty,验证输入和禁用按钮的最简单方法是添加角度表单验证。你需要做的就是用一个表单(如果还没有完成)包围你的代码,并确保它有一个name
。然后将ng-required="true"
添加到您需要的每个输入中。然后,您可以访问formName.$invalid
以确定表单是否有效。
<form name="formName">
<tbody>
<tr ng-repeat="data in resultValue=(vm.ExcelDataDialog) | filter: FilterNullData" class="fade">
<td style="min-width: 2px !important;width:2px !important">{{$index + 1}}</td>
<td>
<input type="text" ng-model="data.Pershkrimi" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.Pershkrimi != null, input_red: data.Pershkrimi == null}" />
</td>
<td>
<input type="text" ng-model="data.Klienti" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.Klienti != null, input_red: data.Klienti == null}" />
</td>
<td>
<input type="text" ng-model="data.KodiArtikullit" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.KodiArtikullit != null, input_red: data.KodiArtikullit == null}" />
</td>
<td>
<input type="number" ng-model="data.Sasia" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.Sasia != null, input_red: data.Sasia == null}" />
</td>
<td>
<input type="number" ng-model="data.Cmimi" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.Cmimi != null, input_red: data.Cmimi == null}" />
</td>
<td>
<input type="text" ng-model="data.DateFillimi" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.DateFillimi != null, input_red: data.DateFillimi == null}" />
</td>
<td>
<input type="text" ng-model="data.DateMbarimi" ng-model-options="{ 'updateOn': 'blur' }" ng-required="true" ng-class="{validate_for_creating_new_ofer: data.DateMbarimi != null, input_red: data.DateMbarimi == null}" />
</td>
</tr>
</tbody>
<md-button type="submit" id="create_offer"
ng-click="vm.AddOfferByImportingExcel()"
class="send-button md-accent md-raised"
aria-label="krijo_oferte"
ng-disabled = "formName.$invalid">
Krijo ofertë
</md-button>
</form>
可能是范围问题。在没有看到如何定义控制器以及如何在模板内使用指令的情况下,很难确切地说出问题。如果你正在使用ng-repeat,它会将范围隔离到它所环绕的任何内容。
ng-repeat='data in datas'
只会在该元素/指令的上下文中提供数据。如果您需要其他可用变量,则需要
ng-repeat='data in datas' other-variable='anotherVarYouNeed'