searchTerm

Data driven input

by long2know

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-controller="myCtrl as vm">
    <form>
        <search-term config="vm.searchParamConfig" ng-model="vm.searchParam"></search-term>
        <pre ng-bind="vm.searchParam | json" />
    </form>
</div>
    
<script type="text/ng-template" id="searchTerm.html">
    <div class="search-param form-group" ng-form="paramForm">
        <div class="form-group">
            <select name='criteria' ng-model='param.key' ng-change='criteriaChange(param)' ng-options='f.key as f.value for f in config.options'
                   ...

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.directives', []);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'myApp.directives',
        'ngSanitize',
        'ngAnimate',
        'ui.bootstrap',
        'ui']);

    var myController = function ($scope, $timeout, $animate, $log) {
        var vm = this,
            init = function () {
                vm.searchParam = {};
                vm.searchParamConfig = {
                    minDate: new Date('01/01/2015'),
                    maxDate: new Date('12/31/2015'),
                    options: [
                        { key: 'prop1', value: 'Prop1 Text', type: 'text' },
                        { key: 'prop2', value: 'Prop2 Text', type: 'text' },
                        { key: 'prop3', value: 'Prop3 Numeric', type: 'numeric' },
                        { key: 'prop4', value: 'Prop4 Date', type: 'date' }
                    ]
                };
            };
        init();
    };

    var searchTermCtrl = function ($scope, $element, $filter, $timeout) {
        var
            param,
            init = function () {
                $scope.param = $scope.ngModel;
                $scope.dateFormat = 'shortDate';
                $scope.dateOptions = {
                    'year-format': "'yyyy'",
                    'starting-day': 1
                };

                $scope.dateopen = { isopen: false };
                $scope.minDate = $filter('date')($scope.config.minDate, "shortDate");
                getOperators();
            },
            getOperators = function () {
                var optionsFilter = function (f) {
                    return f.key === $scope.param.key;
                };
                var result = $scope.config.options.filter(optionsFilter);
                if (result.length !== 0) {
                    param =...