Wie kann 'AngularJS' ein 'option' HTML5-Element deaktivieren?

Wie kann 'AngularJS' ein 'option' HTML5-Element deaktivieren?Wie kann 'AngularJS' ein 'option' HTML5-Element deaktivieren?

Ich benutze AngularJS v1.2.25.

Plunk-Link: https://plnkr.co/edit/fS1uKZ

<!-- CODE BEGIN --> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script data-require="[email protected]" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
    </head> 
    <body> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
    </body> 
</html> 
<!-- CODE END -->

Ich mache eine 'Form' Element und es gibt mehrere 'die Option' Element-Tags mit mehreren 'Option' Element-Tags.

Die Element-Tags 'option' haben identische Attribute in allen vier 'select' Element-Tags.

Ich möchte der Benutzer die Autohersteller einstufen. Wenn sie einen Hersteller auswählen, möchte ich dieses Element 'option' in allen vier 'select' Element-Tags deaktivieren.

Ich habe die folgende Frage/Antwort gefunden, aber ist das der 'AngularJS' Weg? (Disable option in select)

Sie sind mit jQuery, und ich weiß, dass AngularJS enthält ‚jQuery Lite‘, aber ist, dass die Umsetzung der Art und Weise ‚AngularJS‘?

ich diese Dokumentation auf der AngularJS Website gefunden: htt9 $: //docs.angularjs.org/api/ng/directive/ngDisabled

Dies ist die begleitende Plunk Link: htt9 $: // plnkr .co/edit /? p = Vorschau

Ich kann das Beispiel des AngularJS-Teams schätzen. Ich habe darüber nachgedacht, ng-model und/oder ng-disabled zu modifizieren. Ich möchte vermeiden, AngularJS Kerndateien "zu hacken".

Entkopple ich ng-model und/oder ng-disabled?

Oder soll ich einen benutzerdefinierten Filter herstellen?

Ich komme aus einem jQuery-Hintergrund, und ich versuche, AngularJS Best Practices so gut wie möglich einzuhalten. Ich möchte übermäßige "technische Schulden" verhindern.

Quelle

2016-07-01 P82

Für mich Radiobuttons würde eine bessere Form Komponente als wählt zu verwenden scheinen. Würden Sie es mit Radiobuttons versuchen, oder sind die Listen zu lang? – jpumford

Haben Sie irgendwelche Besonderheiten, wenn Sie eine Bedingung deaktivieren möchten? –

@jpumford Ja, Radioknöpfe wären besser.Die Liste ist nicht statisch und kann zunehmen. – P82

Der Winkel Weg, um eine Auswahloption zu deaktivieren ist zu verwenden ng-disabled="expression" This plunker zeigt, wie es gemacht wird.

In Ihrem Fall, dass Sie 4 wählt wie so haben kann:

<select ng-model="model.selected1"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 1)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected2"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 2)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected3"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 3)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected4"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 4)">{{c.label}}</option> 
</select>

wo model.options ist die Liste der Optionen

var model = $scope.model = { 
    options: [ 
     {label: 'Volvo', value: 'volvo'}, 
     {label: 'Audi', value: 'audi'}, 
     {label: 'Saab', value: 'saab'}, 
     {label: 'Opel', value: 'opel'}, 
    ], 
    should_disable: should_disable 
}

Diese Funktion should_disable (c, num) sein soll wahr, wenn Auto c in einer <select> anderen als num ausgewählt wird.

function should_disable(c, selectnum){ 
    var other_selectnums = [1,2,3,4].filter(function(n){ 
     return n != selectnum; 
    }); 
    var is_selected_somewhere_else = false; 
    for(var i=0; i<other_selectnums.length; i++){ 
     var otherselectnum = other_selectnums[i]; 
     if(c.value == model['selected'+otherselectnum]){ 
     is_selected_somewhere_else = true; 
     break; 
     } 
    } 
    return is_selected_somewhere_else; 
    }

Here's a fully working plunkr

Quelle

2016-07-02 02:47:46

Wie kann 'AngularJS' ein 'option' HTML5-Element deaktivieren?

Antwort

Verwandte Themen