How to hide div based on select the dropdown. Here is the sample code i have written
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType" ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="studentType">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur" ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
In controller i have written below code.
$scope.getOption = function(value) {
if (value.studentType = "angularjs") {
$scope.studentType = "false";
}
};
Can any one how to solve this problem.
If anyone have know the solution can you guide me.
Thanks in advanced.
CodePudding user response:
What is the issue with your code?
Its purely the logical issue. You are checking ng-if="studentType"
for showing the input container. Inside the change event you are using if (value.studentType = "angularjs")
. This is not a condition checking, its assignment opertator. You have to use if (value.studentType == "angularjs")
or if (value.studentType === "angularjs")
to compare the value value.studentType
with string "angularjs"
. In your scenario, the if statement will always assign "angularjs"
to studentType
and after that the code inside if will assign "false"
to studentType
. There is no need to do this in this way.
You could do this in multiple ways. I suggest two options here
- Option 1: Inside the template check the value for
studentType
. IfstudentType
is notangularjs
then only display the input. So just add a condition inng-if="studentType !== 'angularjs'"
. Here you dont have to write any logic inside the controller
Working Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
// $scope.showInput = true;
// $scope.getOption = function (value) {
// if (value.studentType == "angularjs") {
// $scope.showInput = false;
// }
// };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="studentType !== 'angularjs'">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
- Option 2: Inside the change function, check the value of selected option. Set a visiblity boolean based on the value of selected option. Make the input visible based on that boolean
Working Fiddle
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.showInput = true;
$scope.getOption = function (value) {
$scope.showInput = value.studentType !== "angularjs";
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<p>Course Type</p>
<div>
<select name="student-type" id="student-type" class="icon-select-down" ng-model="studentType"
ng-change="getOption(this)">
<option value="java" selected>Java</option>
<option value="angularjs">Angular js</option>
<option value="reactJs">React js</option>
</select>
</div>
</div>
<div ng-if="showInput">
<p>Attendence Days</p>
<div class="slice-item">
<input type="text" class="input input-text" ng-model="attendenceDays" required validate-on="blur"
ng-pattern="/^([1-9]|10)$/" invalid-message="'You must enter number between 1 to 25'" />
</div>
</div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>