popover test

http://angularjs.org/

by smlombardi

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>

  <div ng-controller="PMTController">


    <button type="button" class="btn btn-default" popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" popover-placement="bottom" popover-is-open="dynamicPopover.isOpen">
      Table Filter
      <span class="caret"></span>
    </button>


    <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>
              <tr>
                <td>
                  <input type="text" size="5" ng-model="filterPOE">
                </td>
                <td>POE</td>
              </tr>
              <tr>
                <td>
                  <input type="text" size="5" ng-model="filterECCN">
                </td>
                <td>ECCN</td>
              </tr>
              <tr>
                <td>
                  <input type="text" size="5" ng-model="filterItemCondition">
                </td>
                <td>Item Condition</td>
              </tr>
            </tbody>
          </table>
          <div class="filter-buttons">
            <button tabindex="0" class="btn btn-default btn-xs" ng-click="applyFilters()">Apply</button>
           ...

CSS

nav {
  margin-bottom: 1em;
}

JavaScript

var myApp = angular.module("myApp", ["ui.router"]);

myApp.controller('PMTController',
  function($scope, $log) {


    $scope.dynamicPopover = {
      isOpen: false,
      templateUrl: 'filterPopoverTemplate.html',
      open: function open() {
        $scope.dynamicPopover.isOpen = true;
      },
      close: function close() {
        $scope.dynamicPopover.isOpen = false;
      }
    };

    $scope.applyFilters = function() {
      $scope.dynamicPopover.close();
      // apply filters here
    };

    $scope.resetFilters = function() {
      $scope.filterHsCodeRestricted = '';
      $scope.filterHsCode10 = '';
      $scope.filterCOD = '';
      $scope.filterPOE = '';
      $scope.filterECCN = '';
      $scope.dynamicPopover.filterItemCondition = '';
    };
  });