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

【问题标题】：Working with a form inside an Angular UI Bootstrap popover?在 Angular UI Bootstrap 弹出窗口中使用表单？
【发布时间】：2016-07-17 14:10:42
【问题描述】：

我有一个使用模板弹出 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-model 重置为空字符串：

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

但是，如果我在字段中输入内容并单击“重置”，则模型不会被设置为空字符串。我在其他地方做过这个并且它可以工作，只是不在弹出模板内，所以我认为它与弹出框 ng-template 中的字段有关。我如何“访问”那些？

【问题讨论】：

如果我错了，请纠正我，但不应该将变量绑定到模型以便能够使用ng-model？像这样mymodelname.filterHsCodeRestricted
我已经按照我在应用程序中的其他位置使用它的方式使用它。 AFAIK 您只需要在 $scope 上声明一个变量即可使用 ng-model。这是 Angular 1.4.1。
总是总是使用ng-model 中的对象。绑定到原语将在子范围内中断
这 3 分钟的视频非常值得花时间去理解 issue egghead.io/lessons/angularjs-the-dot

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

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

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

所以，要让它工作，你必须创建一个新对象，例如：

$scope.model = {};

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

ng-model="model.filterCOD"

等等..

【讨论】：

【解决方案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

【讨论】：