Search This Blog

Wednesday, September 30, 2015

AngularJS - Add Row dynamically

<!doctype html>
<html ng-app="app">
<head>

    <title>Add Row dynamically</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

    <script type="text/javascript">

        var ng = angular.module('app', []);

        ng.controller('controller', function ($scope) {

            $scope.rows = []; // declared rows and assigned a empty row to the scope

            $scope.addDynamically = function () {

                $scope.rows.push({
                    FirstName: "Fist Name",
                    LastName: "Last Name",
                    IsActive: true,
                    Save: "Save",

                }); //Added the values to scopes which need to be added
            };
        });
    </script>
    <body>

        <h4>Adding Controls Dynamically in Angular Js </h4>

        <div ng-controller="controller" style="border:5px solid gray;width:500px;">

            <button ng-click="addDynamically()" style="color:blue;font-size:18px;">Add New Row Dynamically</button>
            <div>
                <br />
                <input type="text" placeholder="Fist Name">

                <input type="text" placeholder="Last Name">

                <input type="checkbox" name="check" value="inline">IsActive
                <input type="Button" name="check" value="Save" placeholder="Save">
            </div>

            <div ng-repeat="row in rows">

                <input type="text" placeholder="{{row.FirstName}}">

                <input ng-class="{'blockInput': !row.IsActive}" placeholder="{{row.LastName}}" type="text">

                <input type="checkbox" name="check" value="inline">IsActive
                <input type="Button" placeholder="{{row.LastName}}" value="Save">
            </div>
            <br />
        </div>
    </body>

</html>  

AngularJS - XML to JSON from API

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>$http Service | AngularJS</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
(function() {
    var app = angular.module('app', []);
    app.controller('Controller', ['$scope', '$http', '$window', function($scope, $http, $window) {
       $scope.xml = '';
        var XMLFormat = "<test USERID='232323'>"
                         +"<test1>true</test1>"
                         +"<test2>true</test2>"
                         +"<test3>"
                            +"<test4>test value test value</test4>"
                            +"<test5>9999</test5>"
                         +"</test3>"
                         + "</test>";
        var xmlToJson = function (xml) {
            // Create the return object
            var obj = {};
            if (xml.nodeType === 1) { // element
                // do attributes
                if (xml.attributes.length > 0) {
                    obj["@attributes"] = {};
                    for (var j = 0; j < xml.attributes.length; j++) {
                        var attribute = xml.attributes.item(j);
                        obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
                    }
                }
            } else if (xml.nodeType === 3) { // text
                obj = xml.nodeValue;
            }
             //do children
            if (xml.hasChildNodes()) {
                for (var i = 0; i < xml.childNodes.length; i++) {
                    var item = xml.childNodes.item(i);
                    var nodeName = item.nodeName;
                    if (typeof (obj[nodeName]) == "undefined") {
                        obj[nodeName] = xmlToJson(item);
                    } else {
                        if (typeof (obj[nodeName].push) == "undefined") {
                            var old = obj[nodeName];
                            obj[nodeName] = [];
                            obj[nodeName].push(old);
                        }
                        obj[nodeName].push(xmlToJson(item));
                    }
                }
            }
            return obj;
        };
        $http({
            method  : 'GET',
            url: 'http://test.testing.com/testAPI.dll?API=Verify&XML='+XMLFormat+'',
            timeout : 10000,
            params: {},  // Query Parameters (GET)
            datatype: 'application/json',
            transformResponse: function (data) {
                //console.log(JSON.stringify(data));
                // string -> XML document object
                return $.parseXML(data);
                //return JSON.stringify(data);
                //return data;
            }
        }).success(function(data, status, headers, config) {
            console.log('$scope.xml');
            console.log(data);  // XML document object
            $scope.xml = JSON.parse(JSON.stringify(xmlToJson(data)));
            console.log(JSON.parse(JSON.stringify(xmlToJson(data))));
            // Changes XML to JSON
        }).error(function(data, status, headers, config) {
            $window.alert('error');
        });
    }]);
})();
</script>
</head>

<body ng-controller="Controller">
    <section>
        <h1>(Response is XML)</h1>
        <p ng-bind="xml"></p>
    </section>
</body>

</html>

AngularJS - Email and Compare Email Validation

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <link rel="stylesheet" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        var app = angular.module('app', [], function () { });

        app.directive('match', function ($parse) {
            return {
                require: 'ngModel',
                link: function (scope, elem, attrs, ctrl) {
                    scope.$watch(function () {
                        return $parse(attrs.match)(scope) === ctrl.$modelValue;
                    }, function (currentValue) {
                        ctrl.$setValidity('mismatch', currentValue);
                    });
                }
            };
        });

        app.controller('FormController', function ($scope) {
            $scope.fields = {
                email: '',
                emailConfirm: ''
            };

            $scope.submit = function () {
                alert("Submit!");
            };
        });
    </script>
</head>
<body ng-controller="FormController">
    <form name='appForm'>
                <input id="email" name="email" ng-model="fields.email"
                       class="input-xlarge" type="text" />
                <input name="emailConfirm" ng-model="fields.emailConfirm"
                       class="input-xlarge"
                       type="text" match="fields.email" />
                <div ng-show="appForm.emailConfirm.$error.mismatch">
                    <span class="msg-error">Email and Confirm Email must match.</span>
                </div>
    </form>
</body>

</html>