Angularjs Radio Button Example - Jquery
How to use radiobutton in angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Radiobutton which allows the user to choose the the option from alternatives. The sample code to use radio button in angularjs is given below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src='https://code.angularjs.org/angular-1.0.1.js'></script>
<style>
.wrap {
width: 320px;
margin: 0 auto;
display: block;
}
.wrapper {
border: 1px dashed #95a5a6;
height: 56px;
margin-top: 16px;
border-radius: 4px;
position: relative;
font-size: 12px;
}
.wrapper p {
line-height: 31px;
text-align: center;
}
</style>
<div ng-app="" align='center'>
<div class="wrap">
<form>
<label for="first">Radio 1</label>
<input id="first" type="radio" name="content" ng-model="content" value="first">
<label for="other">Radio 2</label>
<input id="other" type="radio" name="content" ng-model="content" value="other">
</form>
<div class="wrapper">
<p ng-show="content == 'first'">This is the first content!</p>
<h2 ng-show="content == 'other'">This is the second content!</h2>
</div>
</div>
</div>
