angularjsjquery-select2ui-select2

Select2 (no results match) with AngularJS


I have a select2 (ui-selecet) and need that when there is no result or all the options have been selected (multi-select) will appear a message and the option to open a modal.

When I click on the button it does not open the modal and does not execute the function.

Select2 Component:

formatNoMatches: function () {
return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' ng-click='modalOpen()'>" + "Cadastrar" + "</button>";
}

Select2 View:

<select ui-select2="select2Options" multiple="multiple" ng-model="select" style="width: 100%" data-placeholder="Selecione uma pessoa">`
<option value=""></option>
<option ng-repeat="person in people" value="{{person}}">{{person.name}}</option>
</select>

Obs.: I think it should be a matter of scope, but I do not know how to solve it.

Would anyone have any ideas or solutions?


Solution

  • Well I managed to solve it like this:

    With this when the results finish or do not have it a message appears and when clicking the button it opens the modal.

    ViewHTML:

    <select ui-select2="select2Options" data-target="#animal" id="select2Callback" multiple="multiple" ng-model="person" >
                                <option value=""></option>
                                <option ng-repeat="person in people" value="{{person}}">{{person.name}}</option>
                            </select>
    

    Select2.js Component:

    formatNoMatches: function () {
            var target = _myOptions[0].target;
            return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' data-toggle='modal' "+
                   "data-target='"+target+"' onClick='openModal(this)'> Cadastrar </button>";
        }
    

    Controller:

    $scope.select2Options = {
                allowClear: true,
                multiple: true,
                target: '#teste'
            };
    

    ModalDirective:

    angular.module('modalDirectives', [])
        .directive('modal', function () {
            var ddo = {};
            ddo.restrict = "E";
            ddo.transclude = true;
            ddo.scope = {
                modalid: '@',
                title: '@'
            };
            ddo.templateUrl = "/app/js/directives/modal.html";
            return ddo;
        })