salix/modules/ticket/front/package/index.html

<vn-crud-model 
    vn-id="model"
    url="TicketPackagings"
    fields="['id', 'ticketFk', 'packagingFk', 'quantity', 'created']"
    link="{ticketFk: $ctrl.$stateParams.id}"
    data="packages"
    auto-load="true">
</vn-crud-model>
<vn-watcher
    vn-id="watcher"
    data="packages"
    form="form">
</vn-watcher>
<form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-horizontal ng-repeat="package in packages track by $index">
            <vn-autocomplete
                vn-one
                vn-focus
                url="Packagings/listPackaging"
                label="Package"
                show-field="name"
                value-field="packagingFk"
                search-function="{or: [{itemFk: $search}, {'name': {like: '%'+ $search +'%'}}]}"
                ng-model="package.packagingFk">
                <tpl-item>{{itemFk}} : {{name}}</tpl-item>
            </vn-autocomplete>
            <vn-input-number
                vn-one
                step="1"
                label="Quantity"
                ng-model="package.quantity"
                rule="TicketPackaging">
            </vn-input-number>
            <vn-date-picker
                vn-one
                label="Added"
                ng-model="package.created"
                disabled="true"
                ng-readonly="true">
            </vn-date-picker>
            <vn-auto>
                <vn-icon-button
                    pointer
                    vn-tooltip="Remove package"
                    icon="delete"
                    ng-click="model.remove($index)">
                </vn-icon-button>  
            </vn-auto>
        </vn-horizontal>
        <vn-icon-button
            vn-tooltip="Add package"
            vn-bind="+"
            icon="add_circle"
            ng-click="$ctrl.add()">
        </vn-icon-button>
    </vn-card>
    <vn-button-bar>
        <vn-submit label="Save"></vn-submit>
    </vn-button-bar>
</form>