Working with a form inside an Angular UI Bootstrap popover?

Question

I have a button that pops up an Angular UI Bootstrap popover, using a template.

You can view it in this pen

The popover template is a form with a table containing a series of text fields with 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>

I have a "reset" button which calls a function that I want to reset all the ng-models to empty strings:

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

However, if I type something into the field and click "reset", the model is not being set to the empty string. I've done this elsewhere and it works, just not inside a popover template, so I assume it has something to do with the fields being in a popover ng-template. How do I "access" those?

Correct me if im wrong but shouldnt the variables be binded to a model to be able to use ng-model? Like so mymodelname.filterHsCodeRestricted — Rikard Olsson
– Rikard Olsson, Commented Jul 17, 2016 at 14:14
I've used it the way i have it else where in the app. AFAIK you just need to declare a variable on the $scope to use ng-model. This is Angular 1.4.1. — Steve
– Steve, Commented Jul 17, 2016 at 14:16
always always always use an object in ng-model. Binding to primitives will break in child scopes — charlietfl
– charlietfl, Commented Jul 17, 2016 at 14:18
This 3 minute video is well worth the time to understand issue egghead.io/lessons/angularjs-the-dot — charlietfl
– charlietfl, Commented Jul 17, 2016 at 14:31

Community · Accepted Answer · 2017-05-23 11:44:10Z

1

The problem is that you're using the model without the DotRule or controller-as-syntax.

The whole problem was already explained by Pankaj Parkar in this question.

So, to make it work, you have to create a new object, ex:

$scope.model = {};

Then, build your ng-model's like this:

ng-model="model.filterCOD"

And so on..

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jul 17, 2016 at 14:19

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Silz · Accepted Answer · 2017-06-28 21:05:26Z

0

The problem with your code is :

You need to define another ng-controller inside your filterPopoverTemplate.html

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

  $scope.resetFilters = function() {  

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

  };

});

Check the corrected code here

answered Jun 28, 2017 at 21:05

Silz

2561 silver badge5 bronze badges

Collectives™ on Stack Overflow

Working with a form inside an Angular UI Bootstrap popover?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related