How to bind a checkbox in angularjs with example

Syntax:

<input type="checkbox" ng-model="expression" />

Checkbox in angularjs with example:

<div ng-controller="angularjsexampleCtlr" class="row">

    <div class="col-lg-12">

        <div class="col-lg-6">

            Get and Set Value form/in input

        </div>

        </div>

    <div class="col-lg-12">

        <div class="col-lg-6">

            <input type="checkbox" class="form-control" ng-model="value" />

        </div>

        <div class="col-lg-6">

            <button ng-click="myfun()">Show Value</button>

            <button ng-click="value=''">Reset</button>

        </div>

    </div>               

    </div>

o/p:     selectedValue= {{value}}

<script>

    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

        $scope.myfun = function () {

            alert("Value : " + $scope.value);

        }

    });

</script>

Get and Set Value form/in input

How to bind a ng-model with input type, Get and Set value from/to input type

Use of ng-model:

ng-model is used with input to get and set value.

<div ng-controller="angularjsexampleCtlr" class="col-lg-12">

        <div class="col-lg-6">

            Get and Set Value form/in input

        </div>

        <div class="col-lg-6">

            <input type="text" ng-model="value"><input>

            <button ng-click="myfun()">Show Value</button>

        </div>

    </div>

o/p:     selectedValue= {{value}}

<script>

    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

        $scope.myfun=function()

        {

            alert("Value : "+$scope.value);

        }

    });

</script>

Get and Set Value form/in input

o/p: value = {{value}}

AngularJs directive for only integer input in a textbox /input type text

Description:

AngularJs directive for only integer input can use to restrict  the value other than Integer.So only integer value is allowed where this directive is given.This AngularJs directive use as class/attribute, follow angularjs example given below.

AngularJs directive for Integer Number:

angular.module('webapp',[]).directive('OnlyIntegerValue', function () {

    return {

        restrict: 'CA',

        require: '?ngModel',

        link: function (scope, element, attrs, ngModelCtrl) {

            if (!ngModelCtrl) {

                return;

            }

            ngModelCtrl.$parsers.push(function (value) {

                var vaildValue = val.replace(/[^0-9]+/g, '');

                if (value !== clean) {

                    ngModelCtrl.$setViewValue(vaildValue);

                    ngModelCtrl.$render();

                }

                return vaildValue;

            });

            element.bind('keypress', function (event) {

                if (event.keyCode === 32) {

                    event.preventDefault();

                }

            });

        }

    };

How to Use Only Integer Directive:

 Example 1:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr" >

        <div>

            Angularjs Example of Integer Only Directive as attribute

            <label >No of Months in a Year</label>

            <input type="text" only-integer-value />

        </div>

    </div>

</div>

Example 2:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of Integer Only Directive as class

            <label >No of Months in a Year</label>

            <input type="text" class="only-integer-value" />

        </div>

    </div>

</div>

ng-checked

What is ng-checked:

ng-checked is used to checked/unchecked status off radio/checkbox ..

Description of ng-checked:

ng-checked has priority 100. When ng-checked has a true condition it makes status checked in other hand when given condition is false status of input (type: radio, checkbox ) become unchecked..

Syntax of ng-checked:

<element ng-checked="expression">

</element>

or

<input type="checkbox" ng-checked="expression" />

How to Use ng-checked/ng-checked Example::

 Example 1:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr" ng-init="flag=true">

        <div>

            Angularjs Example of ng-checked

            <input type="checkbox" ng-checked="flag" />

        </div>

    </div>

</div>

Example 2:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of ng-checked

            <input type="checkbox" ng-checked="flag" />

            <input type="button" ng-click="myfun()" />

        </div>

    </div>

</div>

<script>

    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

        $scope.myfun = function () {

            if ($scope.flag == false || $scope.flag == undefined)

                $scope.flag = true;

            else

                $scope.flag = false;

        }

    });

</script>

ng-disabled

What is ng-disabled:

ng-disabled is used to make element (input ,select ,textarea,button etc) disabled..

Description of ng-disabled:

ng-disabled has priority 100. When given condition in ng-disabled is true ,targeted element become disabled .Otherwise when condition is false targeted element has no effect..

Syntax of ng-disabled:

<element ng-disabled="expression">

</element>

or

<input ng-disabled="expression" />

How to Use ng-disabled/ng-disabled Example::

 Example 1:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr" ng-init="flag=true">

        <div>

            Angularjs Example of ng-disabled

            <input type="text" ng-disabled="flag" />

        </div>

    </div>

</div>

Example 2:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of ng-disabled

            <input type="text" ng-disabled="flag" />

            <input type="button" ng-click="myfun()" />

        </div>

    </div>

</div>

<script>

    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

        $scope.myfun = function () {

            if ($scope.flag == false || $scope.flag == undefined)

                $scope.flag = true;

            else

                $scope.flag = false;

        }

    });

</script>

ng-readonly

What is ng-readonly:

ng-readonly is used to make element (input ,select ,textarea) read only...

Description of ng-readonly:

ng-readonly has priority 100. When given condition in ng-readonly is true ,targeted element become read only.Otherwise when condition is false targeted element has no effect...

Syntax of ng-readonly:

<element ng-readonly="expression">

</element>

or

<input ng-readonly="expression" />

How to Use ng-readonly/ng-readonly Example::

 Example 1:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr" ng-init="flag=true">

        <div>

            Angularjs Example of ng-readonly

            <input type="text" ng-readonly="flag" />

        </div>

    </div>

</div>

Example 2:

<div ng-app="webapp">

    <div ng-controller="angularjsexampleCtlr">

        <div>

            Angularjs Example of ng-readonly

            <input type="text" ng-readonly="flag" />

            <input type="button" ng-click="myfun()" />

        </div>

    </div>

</div>

<script>

    angular.module('webapp', []).controller('angularjsexampleCtlr', function ($scope, $http) {

        $scope.myfun = function () {

            if ($scope.flag == false || $scope.flag == undefined)

                $scope.flag = true;

            else

                $scope.flag = false;

        }

});

</script>