python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions