handle checkbox and radio button in Angularjs example

handle checkbox and radio button in Angularjs example

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.
  1. The input textbox view.
  2. The radio button view.
  3. The check box view.
  4. 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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book