在 Angular UI Bootstrap 弹出窗口中使用表单？

Question

我有一个使用模板弹出 Angular UI Bootstrap 弹出窗口的按钮。

您可以在this pen

中查看

弹出框模板是一个带有 table 的表单，其中包含一系列带有 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>

我有一个 "reset" 按钮，它调用一个函数，我想将所有 ng-models 重置为空字符串：

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

但是，如果我在字段中键入内容并单击 "reset"，则模型不会被设置为空字符串。我在其他地方做过这个并且它有效，只是不在 popover 模板中，所以我认为它与 popover ng-template 中的字段有关。我如何 "access" 那些？

Answer 1

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

Pankaj Parkar in this 已经解释了整个问题。

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

$scope.model = {};

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

ng-model="model.filterCOD"

等等..

Answer 2

您的代码存在问题：

您需要在 filterPopoverTemplate.html

中定义另一个 ng-controller

  app.controller('poptemp', function($scope) {

  $scope.resetFilters = function() {  

    $scope.filterHsCodeRestricted = '';
    $scope.filterHsCode10 = '';
    $scope.filterCOD = '';
    $scope.filterPOE = '';
    $scope.filterECCN = '';
    $scope.filterItemCondition = '';

  };

});

勾选corrected code here

在 Angular UI Bootstrap 弹出窗口中使用表单？

Working with a form inside an Angular UI Bootstrap popover?

javascript

angularjs

angular-ui-bootstrap