2015-05-19 4 views
0


Здравствуйте, Я использую angularJs и bootstrap для разработки веб-приложения. У меня проблема, когда я использую select в модальном окне. Вот ссылка на файл plunker, который работает.
http://plnkr.co/edit/mcl2BMQhWRvRffvbw2nX?p=preview

Это просто, чтобы дать вам представление о моей проблеме. Я не могу поставить настоящий код, потому что это для проекта университетского университета. И я не мог сделать в plunker аналогичный код, который не срабатывал.

Angularjs Select не работает в модальном окне

angular.module('plunker', ['ui.bootstrap']); 
 
var ModalDemoCtrl = function ($scope, $modal, $log) { 
 

 
    $scope.items = ["item1","item2","item3"]; 
 
    
 
    $scope.open = function() { 
 
    var modalInstance = $modal.open({ 
 
     templateUrl: 'myModalContent.html', 
 
     controller: ModalInstanceCtrl, 
 
     resolve: { 
 
      items: function() { 
 
       return $scope.items; 
 
      } 
 
      } 
 
    }); 
 
    }; 
 
    
 
}; 
 

 
var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 
 
    $scope.items = items; 
 
    
 
    $scope.ok = function() { 
 
    $modalInstance.close($scope.items); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $modalInstance.dismiss('cancel'); 
 
    }; 
 
    
 
};
angular.module('plunker', ['ui.bootstrap']); 
 
var ModalDemoCtrl = function($scope, $modal, $log) { 
 

 
    $scope.items = ["item1", "item2", "item3"]; 
 

 
    $scope.open = function() { 
 
    var modalInstance = $modal.open({ 
 
     templateUrl: 'myModalContent.html', 
 
     controller: ModalInstanceCtrl, 
 
     resolve: { 
 
     items: function() { 
 
      return $scope.items; 
 
     } 
 
     } 
 
    }); 
 
    }; 
 

 
}; 
 

 
var ModalInstanceCtrl = function($scope, $modalInstance, items) { 
 
    $scope.items = items; 
 

 
    $scope.ok = function() { 
 
    $modalInstance.close($scope.items); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $modalInstance.dismiss('cancel'); 
 
    }; 
 

 
};

Итак, моя проблема заключается в следующем: в выберите тег (в представлении), я могу увидеть все варианты, но я не могу выбрать их.
Я попытался поставить «.». в моей ссылке на ng-model, и я попытался использовать родительскую область. (Я думаю, что я хорошо разбираюсь в объеме, я прочитал всю документацию об этом, прочитал несколько тем на форумах и много раз пробовал).
Итак, я уверен, что проблема не возникает непосредственно из области. (Более того, я не хочу запускать родительскую область, чтобы она работала обычным образом).

Дело в том, что ng-options не могут работать без ng-модели в <select>. Поэтому я предполагаю, что мой $scope.selectedItem создан где-то. Но после этого выбор заблокирован, и я ничего не могу выбрать.
Если я установил значение по умолчанию в контроллере для моего $scope.selectedItem, тег select обновляется и по умолчанию выбирается значение по умолчанию. Но я все еще не могу выбрать ничего другого.

У вас есть идея, откуда он может исходить?

Заранее спасибо и извините за мой английский :)

+0

Что вы подразумеваете под ** не можете выбрать что-нибудь **? является заблокированным выбором или он просто не примет ваши изменения? – Michael

+0

Выбор заблокирован. Я вижу разные варианты, но когда я выбираю один, нажимая, ничего не происходит. – Mtoypc

+0

Я нашел что-то действительно странное. У меня есть друг, который работает с firefox (например, я). На его компьютере он может использовать выбор в обычном режиме. Он может выбрать любую ценность по своему желанию с помощью того же кода. У нас такая же версия firefox. Единственное отличие - это операционная система. Он использует окна 8, и я использую ubuntu 14.04. Возможно ли, что проблема исходит из этого? – Mtoypc

ответ

0

Я нашел решение моей проблемы. С помощью бутстрапа мы можем создавать модальные окна без объявления чего-либо в файле javascript. Для этого мы должны включить модальное окно в html-файл, который его использует.
Вот пример, который покажет решение (это не тот же самый пример, чем выше):

Этот код открыть модальное:

<div ng-include="getItemTemplate('modalVariables')"></div> 
<button type="button" class="btn btn-primary btn-section" data-toggle="modal" data-target="#variablesModal">Variables</button> 


И в модальных мы имеем:

<div class="modal fade" id="variablesModal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" tabindex="-1"> 
<!-- content of the modal window here --> 
</div> 


С помощью этого кода в модуле правильно работает для меня. Но я до сих пор не знаю, почему он не работал раньше.

Смежные вопросы