在 Angular UI 引导弹出窗口中使用表单

Working with a form inside an Angular UI Bootstrap popover?

本文关键字：窗口 表单 Angular UI      更新时间：2023-09-26

>我有一个按钮，使用模板弹出一个 Angular UI 引导弹出窗口。

您可以在此笔中查看它

弹出框模板是一个表单，其中包含一个表格，其中包含一系列带有 ng 模型的文本字段： 

<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 模型重置为空字符串：

   $scope.resetFilters = function () {
    $scope.filterHsCodeRestricted = '';
    $scope.filterHsCode10 = '';
    $scope.filterCOD = '';
  };

但是，如果我在字段中键入内容并单击"重置"，则模型未设置为空字符串。 我已经在其他地方完成了此操作并且它有效，只是不在弹出框模板中，因此我认为它与弹出框 ng 模板中的字段有关。如何"访问"这些内容？

问题是您在使用没有DotRule或controller-as-syntax的模型时。

Pankaj Parkar在这个问题中已经解释了整个问题。

因此，要使其工作，您必须创建一个新对象，例如：

$scope.model = {};

然后，像这样构建您的ng-model's：

ng-model="model.filterCOD"

等等..

你的代码问题是：

您需要在filterPopoverTemplate中定义另一个ng控制器.html

  app.controller('poptemp', function($scope) {
  $scope.resetFilters = function() {  
    $scope.filterHsCodeRestricted = '';
    $scope.filterHsCode10 = '';
    $scope.filterCOD = '';
    $scope.filterPOE = '';
    $scope.filterECCN = '';
    $scope.filterItemCondition = '';
  };
});

在此处检查更正的代码

相关文章：