我有一个按钮,可以使用模板弹出 Angular UI Bootstrap 弹出窗口。
您可以在 this pen 中查看
弹出窗口模板是一个带有表格的表单,其中包含一系列带有 ng-models 的文本字段:
<script type="text/ng-template" id="filterPopoverTemplate.html">
<div class="filters">
<form>
<table>
<tbody>
<tr>
<td><input type="text" size="5" ng-model="filterHsCodeRestricted"></td>
<td>HS Code Restricted</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterHsCode10"></td>
<td>HS Code 10</td>
</tr>
<tr>
<td><input type="text" size="5" ng-model="filterCOD"></td>
<td>COD</td>
</tr>
</tbody>
</table>
<div class="filter-buttons">
<button tabindex="0" class="btn btn-default btn-xs" ng-click="applyFilters()">Apply</button>
<button class="btn btn-default btn-xs" ng-click="resetFilters()">Reset</button>
</div>
</form>
</div>
</script>
我有一个“重置”按钮,它调用一个函数,我想将所有 ng-models 重置为空字符串:
$scope.resetFilters = function () {
$scope.filterHsCodeRestricted = '';
$scope.filterHsCode10 = '';
$scope.filterCOD = '';
};
但是,如果我在字段中输入内容并单击“重置”,则模型不会设置为空字符串。我已经在其他地方完成了此操作并且它有效,只是不在弹出窗口模板内,所以我认为它与弹出窗口 ng-template 中的字段有关。我如何“访问”这些?
最佳答案
问题在于您使用的模型没有 DotRule
或 controller-as-syntax
。
Pankaj Parkar 已经解释了整个问题。在这个question .
因此,要使其工作,您必须创建一个新对象,例如:
$scope.model = {};
然后,像这样构建您的 ng-model
:
ng-model="model.filterCOD"
等等..
关于javascript - 在 Angular UI Bootstrap 弹出窗口中使用表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38422118/