Symfony 2 date widget (jquery) with angular

Override twig’s default rendering of date widget by following the steps explained here: Twig Form Templating

//twig template
{% block date_widget %}
    {% spaceless %}
        {% if widget == 'single_text' %}
            {% spaceless %}
                {% set type = type|default('text') %}
                <input type="{{ type }}" value="{{ value }}" data-date-picker="" />             
            {% endspaceless %}
        {% else %}
{{ date_pattern|replace({ '{{ year }}': form_widget(form.year), '{{ month }}': form_widget(form.month), '{{ day }}': form_widget(form.day), })|raw }}
{% endif %} {% endspaceless %} {% endblock %}

And angular code(can be easily extended to work with any other library like bootstrap):

directive_app.directive('datePicker', function () {
    return function (scope, element, attrs) {
        var fmt = (attrs.format != 'undefined') ? attrs.format : 'yy/mm/dd'; //supports defining date format through property like <input type="text" data-format="your_format" />
        element.datepicker({ dateFormat: fmt });
    }
});

And define your symfony date widget as:

    $builder->add('data', 'date', array('widget' => 'single_text', 'format' => 'your_format'));

Angular autocomplete directive with custom field names

A short example of using jquery’s autocomplete with angularjs. Code needs some optimization.

directive_app.directive('autoComplete', function ($timeout) {
    return function (scope, element, attrs) {
        element.autocomplete({
            minLength: 1,
            source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                var mapper = $.map(scope[attrs.uiItems], function (item) {
                    return {
                        label: item.custom_field_name,
                        value: item.custom_field_name,
                        id: item.id
                    };
                });
                response($.grep(mapper, function (value) {
                    return matcher.test(value.label);
                })
                );
            },
            select: function (event, ui) {
                $timeout(function () {
                    element.trigger('input');
                }, 0);

                if (attrs.updateModelOnSelect) {
                    scope.$apply(function () {
                        scope[attrs.updateModelOnSelect] = ui.item;
                    });
                }
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            return $("<li>")
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        };
        ;
    };
});

Example usage:

<input type="text" autocomplete="off" data-auto-complete="" data-ui-items="controller_scope_var_to_get_data_from" data-update-model-on-select="controller_scope_var_to_put_selected_item" />

Evaluating scope variables inside ng-repeat with handcrafted html

var directive_app = angular.module('dx.directives', []);
var service_app = angular.module('dx.services', []);
var filter_app = angular.module('dx.filters', []);
var app = angular.module('dx', ['ngResource', 'dx.directives', 'dx.services', 'dx.filters'], function ($compileProvider) {
    $compileProvider.directive('compile', function ($compile) {
        return function (scope, element, attrs) {
            scope.$watch(
                function (scope) {
                    return scope.$eval(attrs.compile);
                },
                function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                }
            );
        };
    })
});

And in your template:

<tr data-ng-repeat="iesire in iesiri">
     <td data-compile="template"></td>
</tr>

Further reading: http://docs.angularjs.org/api/ng.$compile