Show Country States Using Checkbox And ng-show directive

Swappy_Gaj
Posted by Swappy_Gaj under AngularJS category on | Points: 40 | Views : 350
Explanation:
Here we are displaying Country states using Checkbox and populating values based on selection using ng-show directive
---------------------------------------------------------------------------------------------------------------------------------
STEPS:
1.Create two checkboxes
2.Create Select options using ng-show directive to show values

----------------------------------------------------------------------
CODE:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>


SHOW INDIAN STATES:<input type="checkbox" ng-model="indiaval" ng-checked="indiaval" ng-init="indiaval=true">
<hr>
SHOW US STATES:<input type="checkbox" ng-init="usval=true" ng-model="usval" ng-checked="usval">

<br>
<hr>
<select>
<option ng-show="indiaval" ng-hide="!indiaval">Maharashtra</option>
<option ng-show="indiaval">Uttar Pradesh</option>
<option ng-show="indiaval">Madhya Pradesh</option>
<option ng-show="usval">Ohio</option>
<option ng-show="usval">New York</option>
<option ng-show="usval">Florida</option>
</select>
<script type="text/javascript">
var myapp=angular.module('myapp', []);
</script>
</body>
</html>

Comments or Responses

Posted by: Bidhu on: 6/13/2016 Level:Starter | Status: [Member] | Points: 10
Wow i just copy paste the code in VS 2013 and it's working.

Login to post response