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?
Well I managed to solve it like this:
In the component Select2.js I made the change so it displays a button and call an OpenModal(this) function.
I put a _myOptions variable that gets the same arguments as the variable args line 3440.
Next I use this variable (_myOptions) and get the data-target.
In the controller I created a $scope.select2Options where I pass the modal target that is accessed in Select2.js
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;
})