Hi everyone, I am going to share the interesting topic that
is handling the check-box and radio-button.
In this topic, I am using the bootstrap css for look and
feel UI.
- The input textbox view.
- The radio button view.
- The check box view.
- button etc.
The example code as given below.
<!DOCTYPE html>
<html ng-app="formApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script>
var formApp = angular.module('formApp', [])
.controller('myController', function ($scope) {
$scope.result = {};
});
</script>
</head>
<body ng-controller="myController">
<div class="col-xs-12">
<form>
<div>
<div>UserName</div>
<input type="text" class="form-control" name="username" ng-model="result.username">
</div>
<div>Latest js frameworks</div>
<div>
<div class="checkbox-inline">
<input type="checkbox" name="frameworks" ng-model="result.frameworks.nodejs">node.js
</div>
<div class="checkbox-inline">
<input type="checkbox" name="frameworks" ng-model="result.frameworks.angulaijs">angulaijs
</div>
<div class="checkbox-inline">
<input type="checkbox" name="frameworks" ng-model="result.frameworks.knockoutjs">knockoutjs
</div>
</div>
<div>You Interested?</div>
<div class="checkbox">
<div>
<input type="checkbox" name="Interested" ng-model="result.Interested" ng-true-value="Yes!!" ng-false-value="iWish">Are you Interested?
</div>
</div>
<div>Your country?</div>
<div>
<div class="radio">
<div>
<input type="radio" name="country" value="India" ng-model="result.country">India
</div>
</div>
<div class="radio">
<div>
<input type="radio" name="country" value="USA" ng-model="result.country">USA
</div>
</div>
</div>
<button type="submit" class="btn btn-success btn-lg">Get Result</button>
</form>
<h2>Result - JSON Object</h2>
<pre> {{ result }} </pre>
</div>
</body>
</html>
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
