How to hide div based on select the dropdown in angular js

Issue

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 please guide me solving this problem?

Solution

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. If studentType is not angularjs then only display the input. So just add a condition in ng-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>

• 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>

Answered By - Nitheesh