How to show hidden values in angularjs using ng-show in select option

Manideepgoud
Posted by Manideepgoud under AngularJS category on | Points: 40 | Views : 732
In the below code we are going to see how to display the each hidden value using select option, we havedeclared
ng-model =myVar
, to display the hidden value we need to add the particular values as
ng-show=myVar==1, ng-show==2

<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body ng-app="">
<p style="font-size:20px;color:blue;">Hide and show using Angularjs</p>
Show HTML:
<select ng-model="myVar">
<option value="1">Menu1</option>
<option value="2">Menu2</option>
<option value="3">Menu3</option>
</select><br/><br/>
<div ng-class="col-xs-2" ng-show="myVar==1">
<form class="form-horizontal">
<div class="form-group">
<label for="inputFirstName" class="control-label col-xs-2">FirstName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>

</form>
</div>
<div class="col-xs-4" ng-show="myVar==2">
<form class="form-horizontal">
<select class="form-control">
<option value="hai">Hai</option>
<option value="bye">Bye</option>
</select>
</form>
</div>
<div class="col-xs-4" ng-show="myVar==3">
<button class="btn btn-success btn-lg">Click here</button>
</div>

</body>
</html>

Comments or Responses

Login to post response