Select2 (keine Ergebnisse) mit AngularJS

Ich habe eine select2 (ui-selecet) und muss, wenn kein Ergebnis oder alle Optionen ausgewählt wurden (Multi-Select) erscheint eine Nachricht und die Option, eine zu öffnen modal.Select2 (keine Ergebnisse) mit AngularJS

Wenn ich auf die Schaltfläche klicke, wird das Modal nicht geöffnet und die Funktion wird nicht ausgeführt.

Select2 Komponente:

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

Select2 Ausblick:

<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 .: Ich denke, es eine Frage der Tragweite sein sollte, aber ich weiß nicht, wie es zu lösen.

Hätte jemand Ideen oder Lösungen?

Quelle

2017-05-17 Luan Menezes

Nun habe ich es geschafft, so zu lösen:

In der Komponente Select2.js ich die Änderung vorgenommen hat, so dass es eine Schaltfläche zeigt und rufen eine OpenModal (diese) Funktion.
Ich habe eine _myOptions Variable, die die gleichen Argumente wie die Variable args Linie 3440.
Next Ich benutze diese Variable (_myOptions) und bekommen die Daten-Ziel bekommt.
Im Controller habe ich eine $ scope.select2Options, wo ich das modale Ziel übergeben, die

Mit diesem im Select2.js zugegriffen wird, wenn die Ergebnisse beenden oder haben es nicht Es erscheint eine Meldung und beim Klicken auf den Button öffnet sich das 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 Komponente:

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; })

Quelle

2017-05-19 17:41:59

Sie müssen wahrscheinlich $compile verwenden, um die Schaltfläche dynamisch zu generieren und zu kompilieren, sodass die effektiv verknüpft/registriert wird. Das Beispiel verwendet ein Containerelement, um die Schaltfläche so zu halten, dass sie nach dem Kompilieren einfach angehängt werden kann. Es ist nicht notwendig, Sie können es an <body> oder ein anderes DOM-Element anhängen.

Sie müssen $document und $compile injizieren, damit dies funktioniert.

HTML:

<!-- some container to append generated button to --> 
<div id="foo"></div>

JS:

formatNoMatches: function() { 
    // some container element to hold the dynamically generated button 
    var $container = angular.element($document[0].getElementById('foo')); 

    // button markup as angular element wrapped in jqLite 
    var button = angular.element('<button type="button" class="btn btn-default" ng-click="modalOpen()">Cadastrar</button>'); 

    // compile using angular's $compile service 
    button = $compile(button)($scope); 

    // append the button into the container 
    $container.empty().append(button); 
}

Hoffentlich hilft!

Quelle

2017-05-17 19:33:07

Es funktionierte nicht, sie schauen, wie sie in zwei verschiedene Bereiche (RootScope und Scope) sind, ich werde versuchen, es von DOM zu manipulieren und den Befehl zu injizieren Modal zu öffnen; Aber vielen Dank für die Hilfe. –

Select2 (keine Ergebnisse) mit AngularJS

Antwort

Verwandte Themen