我想使用 ngIf angularjs 根据另一个输入字段的值来控制一些选择选项的外观答案

【问题标题】：I want to control the appearance of some select options based on the value of another input field using ngIf angularjs我想使用 ngIf angularjs 根据另一个输入字段的值来控制一些选择选项的外观
【发布时间】：2017-04-04 12:13:52
【问题描述】：

使用 Angularjs 1.x，我正在尝试创建一个有两个选择的表单。根据第一次选择中选择的选项，我想在第二次选择中显示更多或更少的选项。这是表格：

<!DOCTYPE html>
<div id="container" class="container">
   <form ng-submit="submit();">
      <div align="center">
         <table>
            <tr>
               <td>Size:</td>
               <td>
                  <select  ng-model='size' ng-change="updateSize()" required>
                     <option ng-value='1'>1</option>
                     <option ng-value='2'>2</option>
                     <option ng-value='3'>3</option>
                     <option ng-value='4'>4</option>
                     <option ng-value='5'>5</option>
                  </select>
               </td>
            </tr>
            <tr></tr>
            <tr>
               <td>Number</td>
               <td>
                  <select ng-model='category' required>
                     <div ng-if='{{show1}}'>
                        <option value='1'>1</option>
                     </div>
                     <div ng-if='{{show12}}'>
                        <option value='2'>2</option>
                     </div>
                     <div ng-if='{{show123}}'>
                        <option value='3'>3</option>
                     </div>
                     <div ng-if='{{show1234}}'>
                        <option value='4'>4</option>
                     </div>
                  </select>
               </td>
      </div>
      </tr>
      </table>
      <br />
      <button type="submit">Submit</button><br />
      <br /><br />
</div>
</form>
</div>

这里是控制器：

'use strict';

var ngnControllers = angular.module('ngnControllers');
ngnControllers.controller('TestCtrl', ['$scope', '$location', '$http', 
function TestCtrl($scope, $location, $http) {
    $scope.size = 0;
    $scope.category = 0;

    $scope.show1 = false;
    $scope.show12 = false;
    $scope.show123 = false;
    $scope.show1234 = false;

    $scope.updateSize = function() {
    $scope.show1 = parseInt($scope.size, 10) >= 1; 
    $scope.show12 = parseInt($scope.size, 10) >= 2; 
    $scope.show123 = parseInt($scope.size, 10) >= 3; 
    $scope.show1234 = parseInt($scope.size, 10) >= 4; 

    console.log("updateSize called, show1: " + $scope.show1 +
            ", show12: " + $scope.show12 +
            ", show123: " + $scope.show123 +
            ", show1234: " + $scope.show1234);
    };

    $scope.submit = function() {
        console.log("size, category: " + $scope.size + ", " + $scope.category);
        }
}]);

我遇到的问题是这不起作用。第二个选择的所有选项一直显示。更新大小函数的目的是将 $scope.show1 等转换为 ngIf 的布尔值。我尝试了使用 size 值的表达式，但是没有用。

我做错了什么？

【问题讨论】：

标签： javascript angularjs angularjs-templates

【解决方案1】：

ng-if 不使用插值。您只需指定属性

<option ng-if="show1" value="1">1</option>

请参阅文档 (https://docs.angularjs.org/api/ng/directive/ngIf)

【讨论】：

【解决方案2】：

你可以试试：

 <option ng-if='show1' value='1'>1</option>

【讨论】：

这工作，没有插值括号。不过我还是想知道为什么
是的，你是对的，它可以在没有括号的情况下工作。

【解决方案3】：

你试过了吗：

<select ng-model='category' required>
        <option ng-repeat="i in [1,2,3,4]" data-ng-show="i <= size">
        </option>
</select>

【讨论】：