web-dev-qa-db-fra.com

Angular HTML Select option désactiver et activer

J'ai une option de sélection html

<select>
    <option ng-repeat="field in filter.fields" value="{{field.id}}">{{field.name}}</option>
</select>

que j'itère depuis ng-repeat, je veux désactiver l'option sur la base d'un fichier sélectionnable comme

<select>
    <option ng-repeat="field in filter.fields" {field.selectable==true?enable:disable} value="{{field.id}}">{{field.name}}</option>
 </select>

Comment puis-je y parvenir avec angulaire?

javascripthtmlangularjsangularjs-ng-repeat
19
Satish Sharma

En supposant que vous ayez une structure comme celle-ci:

  $scope.filter = {
    fields: [
      {id: 1, name: "a", selectable: false},
      {id: 2, name: "asdf", selectable: true},
      {id: 3, name: "qwet", selectable: false},
      {id: 4, name: "qnjew", selectable: true},
      {id: 5, name: "asdjf", selectable: false}
    ]
  };

Cela devrait fonctionner pour vous:

  <select>
    <option ng-repeat="field in filter.fields" ng-disabled="field.selectable" value="{{field.id}}">{{field.name}}</option>
  </select>
27
Kasper Lewau

Bien que l'attribut ng-disabled fonctionne techniquement, vous risquez de rencontrer des bogues lors de l'utilisation des options ng-repeat on. C'est un problème bien connu et c'est exactement la raison pour laquelle l'équipe angular a créé ng-options. Il n'y a pas encore d'implémentation angular pour utiliser ng-options) et ng-disabled ensemble, mais Alec LaLonde a créé cette directive personnalisée que vous pouvez ajouter et utiliser. Voir le forum sur les problèmes ici: https : //github.com/angular/angular.js/issues/638 et le jsfiddle de ce post .

angular.module('myApp', [])
.directive('optionsDisabled', [ '$parse', function($parse) {
        var disableOptions = function($scope, attr, $element, data, fnDisableIfTrue) {
            $element.find('option:not([value="?"])').each(function(i, e) { //1
                var locals = {};
                locals[attr] = data[i];
                $(this).attr('disabled', fnDisableIfTrue($scope, locals));
            });
        };

        return {
            priority: 0,
            require: 'ngModel',
            link: function($scope, $element, attributes) { //2
                var expElements = attributes.optionsDisabled.match(/^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/),
                    attrToWatch = expElements[3],
                    fnDisableIfTrue = $parse(expElements[1]);
                $scope.$watch(attrToWatch, function(newValue, oldValue) {
                    if (!newValue) return;

                    disableOptions($scope, expElements[2], $element, newValue, fnDisableIfTrue);
                }, true);

                $scope.$watch(attributes.ngModel, function(newValue, oldValue) { //3
                    var disabledOptions = $parse(attrToWatch)($scope);
                    if (!newValue) return;

                    disableOptions($scope, expElements[2], $element, disabledOptions, fnDisableIfTrue);
                });
            }
        };
    }
]);
//1 refresh the disabled options in the select element
//2 parse expression and build array of disabled options
//3 handle model updates properly

function OptionsController($scope) {
    $scope.ports = [{name: 'http', isinuse: true},
                    {name: 'test', isinuse: false}];

    $scope.selectedport = 'test';
}
11
m59

C'est en fait une question assez ancienne. Dans la dernière version de Angular (angular 1.4+) vous avez la directive ngOptions. Voici le lien: -

https://docs.angularjs.org/api/ng/directive/ngOptions

Il existe maintenant une syntaxe pour gérer ce cas: -

label disable when disable for value in array track by trackexpr

J'ai pensé que je mettrais cela au cas où quelqu'un d'autre visiterait cette page.

4
user1545858