0

使用 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 的布尔值。我尝试了使用大小值的表达式，但这不起作用。

我究竟做错了什么？

4

3 回答 3

1

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

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

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

于 2017-04-04T12:24:02.403 回答
1

你可以试试：

 <option ng-if='show1' value='1'>1</option>
于 2017-04-04T12:19:55.270 回答
0

你有没有尝试过：

<select ng-model='category' required>
        <option ng-repeat="i in [1,2,3,4]" data-ng-show="i <= size">
        </option>
</select>
于 2017-04-04T12:25:54.280 回答