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...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.