ng-options с отключенными строками

Можно ли использовать ng-options которые он будет отображать в отключенные строки на основе критериев?

это:

   

возможно, можно превратиться в нечто подобное:

   

и, скажем, через фильтр, который может вернуть disabled='disabled' для всех цветов с тенью = “темный”

   black red blue   white yellow   

    Ответ @ lucuma (первоначально принятый ответ) был правильным, но теперь должен быть обновлен, потому что это было зафиксировано в Angular 1.4. См. Документы ng-options, которые также содержат пример .

    Я использую Angular 1.5, и это работает для меня:

    Посмотреть

    controller

    vm.items = [ { id: 'optionA', label: 'Option A' }, { id: 'optionB', label: 'Option B (recommended)' }, { id: 'optionC', label: 'Option C (Later)', disabled: true } ]; vm.selectedItem = vm.items[1];

    Как отметил @Lod Angular, добавленная поддержка этого в 1.4.0-beta.5.

    Для углового js > = 1.4.0-beta.5 .

      

    А для углового js <1.4.0-beta.5 см. Решение ниже:

    Подобно тому, который задан @lucuma, но без зависимости jQuery .

    Проверьте это http://jsfiddle.net/dZDLg/46/

    controller

     

    директива

     angular.module('myApp', []) .directive('optionsDisabled', function($parse) { var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) { // refresh the disabled options in the select element. var options = element.find("option"); for(var pos= 0,index=0;pos 

    Примечание . Это решение не работает с group by как указано на всех. Обратитесь к решению ниже от @DHlavaty, если вы хотите, чтобы он работал с group by .

    Угловая добавленная поддержка для этого в 1.4.0-beta.5

      

    Я не верю, что есть способ сделать то, что вы просите, просто используя ng-options . Эта проблема была поднята по угловому проекту и по-прежнему открыта:

    https://github.com/angular/angular.js/issues/638

    Кажется, что работа вокруг заключается в использовании директивы, на которую ссылаются здесь и в проблеме github: http://jsfiddle.net/alalonde/dZDLg/9/

    Вот полный код из jsfiddle для справки (код ниже из jsfiddle alande):

     
    angular.module('myApp', []) .directive('optionsDisabled', function($parse) { var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) { // refresh the disabled options in the select element. $("option[value!='?']", element).each(function(i, e) { var locals = {}; locals[attr] = data[i]; $(this).attr("disabled", fnDisableIfTrue(scope, locals)); }); }; return { priority: 0, require: 'ngModel', link: function(scope, iElement, iAttrs, ctrl) { // parse expression and build array of disabled options var expElements = iAttrs.optionsDisabled.match(/^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/); var attrToWatch = expElements[3]; var fnDisableIfTrue = $parse(expElements[1]); scope.$watch(attrToWatch, function(newValue, oldValue) { if(newValue) disableOptions(scope, expElements[2], iElement, newValue, fnDisableIfTrue); }, true); // handle model updates properly scope.$watch(iAttrs.ngModel, function(newValue, oldValue) { var disOptions = $parse(attrToWatch)(scope); if(newValue) disableOptions(scope, expElements[2], iElement, disOptions, fnDisableIfTrue); }); } }; }); function OptionsController($scope) { $scope.ports = [{name: 'http', isinuse: true}, {name: 'test', isinuse: false}]; $scope.selectedport = 'test'; }

    С февраля 2015 года существует способ отключить параметры в теге ng-options.

    Эта ссылка показывает добавление функции на github

    Я обнаружил, что с использованием углового 1.4.7 синтаксис изменился с «disable by» на «disable when».

    Синтаксис для этого:

     'ng-options': 'o.value as o.name disable when o.unavailable for o in options' 

    Аналогичный эффект может быть достигнут с помощью ng-repeat и ng-disabled в самой опции, избегая использования новой директивы.

    HTML

     

    controller

     function ExampleController($scope, $timeout) { $scope.colors = [ {name:'black', shade:'dark'}, {name:'white', shade:'light'}, {name:'red', shade:'dark'}, {name:'blue', shade:'dark'}, {name:'yellow', shade:'light'} ]; $timeout(function() { $scope.myColor = 4; // Yellow }); } 

    скрипка

    http://jsfiddle.net/0p4q3b3s/

    Известные вопросы:

    • Не использует ng-options
    • Не работает с group by
    • Выбирает индекс, а не объект
    • Требуется $timeout для первоначального выбора

    У меня была интересная ситуация. Массив выпадающих списков, и мне нужно его отключить параметры, которые уже были выбраны в каждом из выпадающих меню, но мне также нужно, чтобы он включал тот, который был выбран уже …

    здесь мой плункер: Включить / Отключить значения с помощью ng-options

     var app = angular.module('ngoptions', []); app.controller('MainCtrl', function($scope) { // disable the fields by default $scope.coverage = [ { CoverageType: '', CoverageName: 'No Coverage' }, { CoverageType: 'A', CoverageName: 'Dependent Only' }, { CoverageType: 'B', CoverageName: 'Employee Plus Children' }, { CoverageType: 'C', CoverageName: 'Employee Only' }, { CoverageType: 'D', CoverageName: 'Employee Plus One' }, { CoverageType: 'E', CoverageName: 'Employee Plus Two' }, { CoverageType: 'F', CoverageName: 'Family' }, ]; // values already set ex: pulled from db $scope.rates = ['A','C', 'F']; $scope.changeSelection = function (index, rate){ $scope.rates[index] = rate; disableRecords(); } // start by disabling records disableRecords(); function disableRecords () { // set default values to false angular.forEach($scope.coverage, function (i, x) { i.disable = false; }); // set values to true if they exist in the array angular.forEach($scope.rates, function (item, idx) { angular.forEach($scope.coverage, function (i, x) { if (item == i.CoverageType) { i.disable = true; } }); }); } }); 
          AngularJS Plunker       

    Аналогичное «без jQuery» решение как @ Vikas-Gulati , но оно работает с group by

    В моем случае, group by не работает, потому что мой первый был без значения, просто с помощью Please select and item from dropdown . Это слегка измененная версия, которая фиксирует эту конкретную ситуацию:

    Использование simmilar @ Vikas-Gulati отвечает: https://stackoverflow.com/a/20790905/1268533

    директива

     angular.module('disabledModule', []) .directive('optionsDisabled', function($parse) { var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) { var realIndex = 0; angular.forEach(element.find("option"), function(value, index){ var elem = angular.element(value); if(elem.val()!="") { var locals = {}; locals[attr] = data[realIndex]; realIndex++; // this skips data[index] with empty value (IE first  

    Вы можете отключить использование ngOptions в угловом 1.4.1 или выше

    Шаблон HTML

     

    Код controllerа

     angular.module('myapp',[]).controller("ctrl", function($scope){ $scope.reportingOptions=[{'code':'text','itemVal':'TEXT','disable':false}, {'code':'csv','itemVal':'CSV','disable':true}, {'code':'pdf','itemVal':'PDF','disable':false}]; 

    })

    Поскольку я не могу обновиться до последней угловой строки, поэтому была создана более простая директива для ее обработки.

     .directive('allowDisabledOptions',['$timeout', function($timeout) { return function(scope, element, attrs) { var ele = element; var scopeObj = attrs.allowDisabledOptions; $timeout(function(){ var DS = ele.scope()[scopeObj]; var options = ele.children(); for(var i=0;i 

    для получения дополнительной информации: https://github.com/farazshuja/disabled-options

    Я также скрывал отключенные опции, добавляя строку подбора:

    $(this).css("display", fnDisableIfTrue(scope, locals) ? "none" : "block");

    Это было необходимо, поскольку я не мог просто отфильтровать их, поскольку начальное значение этого выбора может быть одним из отключенных параметров.

    Interesting Posts

    как установить переменную среды GOPATH на Ubuntu? Какой файл я должен изменить?

    Как разобрать текст справа налево в Блокноте?

    Накладные расходы .NET-массива?

    Удалите несколько объектов с помощью rm ()

    Не удалось найти имя «require» после обновления до Angular4

    Прозрачный полуокруг, вырезанный из div

    Загрузочный лоток: свернуть другие разделы, если один из них расширен

    Ошибка Gulp: Следующие задачи не были выполнены: вы забыли обработать асинхронное завершение?

    Шифрование базы данных Android

    Существует ли в Java обычная библиотека рациональных чисел?

    Прочитать переменную в bash со значением по умолчанию

    Android Сохранение созданного растрового изображения в каталог на SD-карте

    В чем разница между перебрасыванием и понижающим литьем по отношению к переменной classа

    Получить сгенерированный идентификатор после вставки

    масштаб HTML5 Видео и разбить соотношение сторон для заполнения всего сайта

    Давайте будем гением компьютера.