Как показать различные варианты в раскрывающемся меню?

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

Вы можете использовать нг-инициализации, чтобы определить свою ценность различий:

<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 или model.

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

Try и использование нг-, если вместо этого -

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

Вы могли бы попробовать что-то вроде этого, где вычисляется значение дифференциала, а затем перешел в выберите тег, вы также не можете назначить нг-модель в <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>