如何在下拉菜單中顯示不同的選項？

Question

我有一個下拉按鈕，我想顯示不同的選項，取決於當前的數字和前面的數字之間的差異是否定的或正面的。

如何修復我的代碼以使其工作？

<td id="diff" ng-model="diff"> 
    {{val1 - val2}} 
</td> 
<td> 
    <div id="actnot"> 
    <select name='act_id' id="aktion_1"> 
     <option value='1' ng-show="diff <= 0">Option 1</option> 
     <option value='2' ng-show="diff >= 0">Option 2</option> 
     <option value='3' ng-show="diff >= 0">Option 3</option> 
    </select> 
    </div> 
</td> 

Answer 1

可以使用NG-init重新定義你的DIFF值：

<td ng-init="diff = val1-val2"> 
    <div id="actnot"> 
    <select name='act_id' id="aktion_1"> 
     <option value='1' ng-show="diff <= 0">Option 1</option> 
     <option value='2' ng-show="diff >= 0">Option 2</option> 
     <option value='3' ng-show="diff >= 0">Option 3</option> 
    </select> 
    </div> 

如果它的工作不是（我沒有測試的代碼），也許你可以做內部的差異您的控制器並將其添加到$範圍或模型對象。

Answer 2

試試這個：Fiddle

我已經使用ng-if隱藏和顯示選項ng-show，在默認情況下顯示的第一個選項

<select> 
     <option value="one" ng-if="diff <= 0">One</option> 
     <option value="two" ng-if="diff >= 0">Two</option> 
     <option value="three" ng-if="diff >= 0">Three</option> 
</select> 

Answer 3

嘗試使用NG-如果不是 -

var app = angular.module("myApp",[]); 
 

 
app.controller("myCntr",function($scope){ 
 
$scope.val1 = 9; 
 
    $scope.val2 = 7; 
 
    $scope.diff = $scope.val1-$scope.val2; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCntr"> 
 
    <td id="diff">{{val1 - val2}}</td> 
 
    <td> 
 
     <div id="actnot"> 
 
     <select name='act_id' id="aktion_1"> 
 
      <option value='1' ng-if="diff <= 0">Option 1</option> 
 
      <option value='2' ng-if="diff >= 0">Option 2</option> 
 
      <option value='3' ng-if="diff >= 0">Option 3</option> 
 
     </select> 
 
     </div> 
 
    </td> 
 
    </div>

Answer 4

你可以嘗試這樣的事情，那裏的DIFF值進行評估，然後進入選擇標籤，你也不能在NG-模型分配給<td>標籤

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
{{diff = val1 - val2}} 
 
    <td> 
 
     <div id="actnot"> 
 
     <select name='act_id' id="aktion_1"> 
 
      <option default>--Select--</option> 
 
      <option value='1' ng-show="diff <= 0">Option 1</option> 
 
      <option value='2' ng-show="diff >= 0">Option 2</option> 
 
      <option value='3' ng-show="diff >= 0">Option 3</option> 
 
     </select> 
 
     </div> 
 
    </td> 
 
</div> 
 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.val1=3; 
 
    $scope.val2=4; 
 
}); 
 
</script>