使用AngularJS的Select2（沒有結果匹配）
[英]Select2 (no results match) with AngularJS
問題描述
我有一個select2（ui-selecet），需要在沒有結果或所有選項都被選中（多選）時出現一條消息，以及打開模態的選項。
當我單擊按鈕時，它不會打開模態，也不會執行功能。
Select2組件：
formatNoMatches: function () {
return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' ng-click='modalOpen()'>" + "Cadastrar" + "</button>";
}
Select2視圖：
<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>
觀察：我認為應該是范圍問題，但我不知道如何解決。
會有人有任何想法或解決方案嗎？
2 個解決方案
解決方案1
0 2017-05-17 19:33:07
您可能需要使用$compile動態生成和編譯按鈕，以便有效地附加/注冊ng-click 。 該示例使用容器元素來保存按鈕，以便在編譯后可以輕松地添加按鈕，這不是必需的，您可以將其添加到<body>或任何其他DOM元素。
您需要注入$document和$compile使其起作用。
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);
}
希望有幫助！
解決方案2
0 已采納 2017-05-19 17:41:59
好吧，我設法這樣解決：
在組件Select2.js中，我進行了更改，以便它顯示一個按鈕並調用OpenModal（this）函數。
我放置了一個_myOptions變量，該變量與變量args第3440行具有相同的參數。
接下來，我使用此變量（_myOptions）並獲取數據目標。
在控制器中，我創建了$ scope.select2Options ，並在其中傳遞了在Select2.js中訪問的模式目標。
這樣，當結果完成或沒有結果時，將顯示一條消息，並在單擊按鈕時打開模態。
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組件：
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>";
}
控制器：
$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;
})
使用AngularJS和Select2
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.