Wie kann ich die Auswahl-Optionen von angularjs

manipulieren Ich habe folgendes Problem, ich habe 3 Auswahlfelder (generiert von ngOptions) mit wenigen Optionen (100,200,300). Zum Beispiel Optionen mit Breite für, Seiten, Boden, (diese Breiten die gleichen in diesen Feldern sind) und ich habe 2 Bedingungen:Wie kann ich die Auswahl-Optionen von angularjs

Die Breite oben kann nicht größer sein dann Seiten Breite (also wenn Breite Seiten 100 ist, kann die obere Breite von 0 bis 100 gleich sein).
die Breite Boden kann größer sein als Seiten (also wenn Breitseiten 100, die untere Breite mehr als 100 sein kann)

und nach Wahl benötigen i Zugriff auf diese zugewiesene Werte haben von ausgewählten Felder.

Ich muss dies in angularjs durch Direktive tun.

angular.module('myApp', []) 
 
.controller('Ctrl', function($scope) { 
 
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }]; 
 
});

<html ng-app="myApp"> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<div ng-controller="Ctrl"> 
 
    
 
     <select ng-model="player" ng-options="w.width for w in widths track by w.width" id="top"></select> 
 
     <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select> 
 
     <select ng-model="player3" ng-options="w.width for w in widths track by w.width" id="bottom"></select> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </body> 
 
    </html>

Quelle

2016-10-02 Sonic

Generell Sie Ihr Modell manipulieren, wird die Auswahl aktualisieren durch Bindung . – ste2425

Filtern Sie die verfügbaren Optionen in einem Change-Event-Handler – charlietfl

Ich beschrieb alles und fügte Snipet hinzu – Sonic

Sie können eine Funktion verwenden Optionen in ng-select zurückzukehren. Sie können auf die Variablen wie $ scope.player, $ scope.player1, $ scope.player2 zugreifen, wie Sie bereits definiert haben. Achten Sie darauf, die drei Variablen auf einen Standardwert initialisiert werden (sonst seine undefinierte und zeigt sich als eine leere Option in der Dropdown-Liste)

angular.module('myApp', []) 
 
.controller('Ctrl', function($scope) { 
 
    $scope.widths = [{ width: 300 }, { width: 500 }, { width: 400 }]; 
 
    $scope.getTopOptions = function() { 
 
       var ret = []; 
 
       if (!$scope.player2) { 
 
        return $scope.widths; 
 
       } 
 
       angular.forEach($scope.widths, function (width) { 
 
        if (width.width <= $scope.player2.width) { 
 
         ret.push(width); 
 
        } 
 
       }); 
 
       return ret; 
 
      }; 
 

 
      $scope.getBottomOptions = function(){ 
 
       var ret = []; 
 
       if(!$scope.player2){ 
 
        return $scope.widths; 
 
       } 
 
       angular.forEach($scope.widths, function (width) { 
 
        if (width.width > $scope.player2.width) { 
 
         ret.push(width); 
 
        } 
 
       }); 
 
       return ret; 
 

 
      } 
 
});

<html ng-app="myApp"> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
<div ng-controller="Ctrl"> 
 
    
 
     <select ng-model="player" ng-options="w.width for w in getTopOptions() track by w.width" id="top"></select> 
 
     <select ng-model="player2" ng-options="w.width for w in widths track by w.width" id="sides"></select> 
 
     <select ng-model="player3" ng-options="w.width for w in getBottomOptions() track by w.width" id="bottom"></select> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </body> 
 
    </html>

Quelle

2016-10-02 23:41:12

Wie kann ich die Auswahl-Optionen von angularjs

Antwort

Verwandte Themen