我如何操作angularjs的選擇選項

我有以下問題，我有3個選擇字段（生成ngOptions）與幾個選項（100,200,300）。對於具有寬度例如選項頂部，側，底部，（這個寬度在這個字段中的相同）和i具有2個條件：我如何操作angularjs的選擇選項

寬度頂部不能大於邊寬度（所以如果寬度爲邊爲100，則頂寬可以等於0到100）。
寬度底部可以更大然後邊（因此，如果寬度側是100，底部寬度可以更然後100）

和選擇後，我必須訪問來自選擇這個分配的值領域。

我必須通過指令在angularjs中執行此操作。

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>

來源

2016-10-02 Sonic

一般來說你操縱你的模型，選擇將通過綁定更新。 – ste2425

篩選更改事件處理程序中的可用選項 – charlietfl

我描述了所有內容，並添加了snipet – Sonic

您可以使用一個函數在NG-選擇返回選項。您可以按照您已經定義的方式訪問變量$ scope.player，$ scope.player1，$ scope.player2。確保初始化三個變量的默認值（否則它的不確定，並顯示在下拉空白選項）

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>

來源

2016-10-02 23:41:12

我如何操作angularjs的選擇選項

回答

相關問題