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

【问题标题】：How do I show different options on dropdown?如何在下拉菜单中显示不同的选项？
【发布时间】：2016-11-29 08:07:22
【问题描述】：

我有一个下拉按钮，我想根据当前数字与前一个数字之间的差异是负数还是正数来显示不同的选项。

如何修复我的代码以使其正常工作？

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

【问题讨论】：

请分享您的控制器部分，其中包括 val1 和 val2 以及 diff 变量
你不应该在你的问题中添加angular标签吗？

标签： javascript html angularjs dropdown

【解决方案1】：

您可以使用 ng-init 来定义您的差异值：

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

如果它不起作用（我没有测试代码）也许你可以在你的控制器中做差异并将它添加到 $scope 或模型对象。

【讨论】：

差异来自控制器的 ng-model
我的理解是@LuMi 试图添加以从{{ var1 - var2}} 的结果中定义差异变量并将其附加到模型中。

【解决方案2】：

您可以尝试这样的方法，评估差异值，然后将其传递到选择标签中，您也不能将 ng-model 分配给<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>

【讨论】：

【解决方案3】：

尝试使用 ng-if 代替 -

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>

【讨论】：

【解决方案4】：

试试这个：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>

【讨论】：