如何在下拉菜单中显示不同的选项？

Question

I have got a dropdown button and I want to show different options depending on whether the difference between the current number and the preceding number is negative or positive.

How can I fix my code to make this work?

<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

You can use ng-init to define your diff value :

<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>

If it's not working (I didn't test the code) maybe you can do the diff inside your controller and add it to the $scope or model object.

Answer 2

Try this: Fiddle

I have used ng-if to hide and show options as ng-show , by default shows the first option

<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

Try and use ng-if instead -

 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

You could try something like this,where the diff value is evaluated and then passed into the select tag,You also cannot assign a ng-model to a <td> tag

 <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>