Tuesday, 19 January 2016

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

Saturday, 16 January 2016

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}}

Sunday, 10 January 2016

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>