Simple Angular Binding demo with directive

Externalize the time into a separate directive component.

by Duke Dinh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.css">
<div ng-app="myApp" ng-controller="MyCtrl">
  <form name="form">
    <div class="space"></div>
    <div ng-repeat="p in reportPrompt" class="">
      <report-prompts show-key="p.showKey" show-display="p.showDisplay" prompt-type="p.promptType" multiple-select="p.multipleSelect" required="p.required" translate-text="changeToKey('CRITERIA_', p.promptName)" camel-case-name="camelize(p.promptName)" log-selected-value="logCriteria(r)"
      model-value="criteria[camelize(p.promptName)]" prompt-name="p.promptName" prompt-values="p.promptValues"></report-prompts>
    </div>
    <div style="margin-bottom:4%">
    </div>
    <div class="btn-toolbar">
      <div ng-if="labelId !== undefined" class="btn-group">
        <button ng-disabled="count.length != 0 || loading" id="ReportExportBtn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" translate="REPORTS_EXPORT_BUTTON">Export</button>
        <ul class="dropdown-menu" role="menu">
          <li ng-if="showExcel=='t'">
            <a href="" class="fileDownloadSimpleRichExperience" ng-click="export(labelId, 'XLS')" translate="REPORTS_XLS">XLS</a>
          </li>
          <li ng-if="showCsv=='t'">
            <a href="" class="fileDownloadSimpleRichExperience" ng-click="export(labelId, 'CSV')" translate="REPORTS_CSV">CSV</a>
          </li>
          <li ng-if="showPdf=='t'">
            <a href="" class="fileDownloadSimpleRichExperience" ng-click="export(labelId, 'PDF')" translate="REPORTS_PDF">PDF</a>
          </li>
        </ul>
      </div>
      <div ng-if="labelId !== undefined || showPreview=='t'" class="btn-group">
        <button ng-disabled="count.length != 0 || loading" ng-click="previewReportGrid(labelId)" id="" type="button" class="btn btn-default"...

CSS

.has-error .form-control {
  border: 2px solid #a94442;
}

JavaScript

angular.module('myApp', [])
  .controller("MyCtrl", function($scope) {
    $scope.criteria = {};
    $scope.criteriaCopy = {};

    $scope.reportPrompt = [{
      promptId: 1,
      promptName: "Week Of",
      promptType: "list",
      promptDataType: "string",
      multipleSelect: "f",
      required: "t",
      promptValues: [{
        key: "2016-01-18"
      }, {
        key: "2016-01-11"
      }, {
        key: "2016-01-04"
      }, {
        key: "2015-12-28"
      }]
    }, {
      promptId: 2,
      promptName: "DUNS",
      promptType: "smart_list",
      promptDataType: "string",
      multipleSelect: "t",
      required: "t",
      promptValues: [{
        display: "RECEPTEC CORP",
        key: "0000140640"
      }, {
        display: "SAINT GOBAIN SEKURIT (THAILAND)",
        key: "0000158642"
      }, {
        display: "METAL TEXTILES CORP",
        key: "0001773183"
      }]
    }, {
      promptId: 3,
      promptName: "Error Description",
      promptType: "smart_list",
      promptDataType: "string",
      multipleSelect: "t",
      required: "f",
      promptValues: [{
        key: "Code 1: Transportation Lead Time does not exist."
      }, {
        key: "Code 2: Manufacturing Lead Time does not exist."
      }, {
        key: "Code 3: Schedule/PO does not exist."
      }]
    }];

    $scope.camelize = function(s) {
      s = s.replace(/([^a-zA-Z0-9_\- ])|^[_0-9]+/g, "").trim().toLowerCase();
      s = s.replace(/([ -]+)([a-zA-Z0-9])/g, function(a, b, c) {
        return c.toUpperCase();
      });
      s = s.replace(/([0-9]+)([a-zA-Z])/g, function(a, b, c) {
        return b + c.toUpperCase();
      });
      return s;
    };

    var createCriteriaObj = function() {
    	$scope.count = [];
      for (var i = 0; i < $scope.reportPrompt.length; i++) {
        $scope.criteria[$scope.camelize($scope.reportPrompt[i].promptName)] = [];
        if ($scope.reportPrompt[i].required == 't') {
        	$scope.count.push(i);
        }
      }
     ...