I am currently utilizing Angularjs 1.x to develop a form with two select fields. Depending on the option selected in the first select, I aim to dynamically show or hide certain options in the second select field. Below is the code snippet for the form:
<!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>
Additionally, here is the controller implementation:
'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);
}
}]);
It seems that this functionality is not functioning as expected. The issue lies in all options of the second select being displayed regardless of the selection in the first select. The purpose of the update size function is to convert $scope.show1 etc. into boolean values for ngIf directives. Attempts were made using expressions based on the size value, but they did not yield the desired outcome.
What could be the cause of this issue?