SIGNUP Form With Validation AngularJs

HTML

<form class="register-form" name="formRegister">
                    <p class="form_logo">
                        <img title="" alt="" src="img/logo.png" class="">
                    </p>
                    <label ng-class="{ 'has-errors' : formRegister.userEmail.$invalid && !formRegister.userEmail.$pristine, 'no-errors' : formRegister.userEmail.$valid}">
                        <input focus id="registerEmails" type="email" placeholder="Email" ng-model="userEmail">
                    </label>              
                    <label ng-class="{ 'has-errors' : formRegister.userPassword.$invalid && !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
                        <input focus type="password" placeholder="Password" id="userPassword" name="userPassword" ng-model="userPassword" required />
                    </label>
                    <label ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && !formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
                        <input focus type="password" id="confirmPassword" name="confirmPassword" placeholder="Retype Password" ng-model="confirmPassword" required compare-to="userPassword">
                    </label>
                    <div class="msg-block ng-invalid" ng-show="formRegister.$error">
                        <span class="msg-error ng-invalid" ng-show="formRegister.confirmPassword.$error.pwmatch">
                            Password doesn't match.
                        </span>
                    </div>
                    <button ng-click="doRegister()" class="button button-block button-balanced" ng-disabled="formRegister.$invalid" style="padding:0 !important">
                        SIGN UP
                    </button>
                    <p class="message">Already registered? <a ng-href="#/app/login">Sign In</a></p>
                 
                </form>


Directive


//password compare
app.directive('compareTo', [function () {
    return {
        require: "ngModel",
        scope: {
            otherModelValue: "=compareTo"
        },
        link: function (scope, element, attributes, ngModel) {
            var firstPassword = '#' + attributes.compareTo;
            element.on('keyup', function () {
                scope.$apply(function () {
                    var v = element.val() === $(firstPassword).val();
                    ngModel.$setValidity('pwmatch', v);
                });
            });
        }
    };

}]);


//move to next input when enter
app.directive('focus', function () {
    return {
        restrict: 'A',
        link: function ($scope, elem, attrs) {
            elem.bind('keydown', function (e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    e.preventDefault();
                    //          elem.next().focus();

                    if (elem.attr('id') == "registerEmail") {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').on('focus', function () {
                            $(this).attr('type', 'date');
                        });
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus().click();
                    }
                    else {
                        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
                    }
                }
            });
        }
    }
});

read more

Textbox with autocomplete dropdown Ionic

Directive

app.directive('ionSelect', function ($rootScope) {
    'use strict';
    return {
        restrict: 'EAC',
        scope: {
            label: '@',
            labelField: '@',
            provider: '=',
            ngModel: '=?',
            ngValue: '=?',
            labelId: '@',
            placeholderValue: '@',
            globalClass: '@',
            placeholderClass: '@',
        },
        require: '?ngModel',
        transclude: false,
        replace: false,
        template: '<div class="item item-input-inset noBorderTop noPadding divSlectText">'
                + '<label class="item-input-wrapper">'
                + '<input id="filtro" class="{{placeholderClass}}" type="search" intype="placeholder" language-seletion key="{{placeholderValue}}"   ng-model="ngModel" ng-value="ngValue" /></label>'
                + '<button class="button button-small button-clear inputOpen"><i class="icon ion-chevron-down"></i>'
                + '</button></div><div class="optionList padding-left padding-right hideSelectText">'
                + '<ion-scroll class="selectScroll"><ul class="list">'
                + '<li class="item  {{globalClass}}" ng-click="selecionar($event,item,labelField,labelId)" ng-repeat="item in provider | filter:ngModel">{{item[labelField]}}</li></ul>'
                + '</ion-scroll></div>',
        link: function (scope, element, attrs, ngModel) {
            scope.ngValue = scope.ngValue !== undefined ? scope.ngValue : 'item';
            scope.selecionar = function ($event,item, name, id) {
               
                ngModel.$setViewValue(item[name]);              
                if (name == 'SpecialityName') {
                    $rootScope.medicalProviderData.SpecialityId = { SpecialityId: item[id] };
                }
                scope.showHide = false;                $event.target.parentElement.parentElement.parentElement.classList.remove("showSelectText");
                $event.target.parentElement.parentElement.parentElement.classList.add("hideSelectText");
            };
            element.bind('click', function () {
                element.find('input').focus();
            });
            element.find('button').bind('click', function () {
                var $this = $(this);
                $('.divSlectText').each(function () {
                    if ($this.parent().parent().find('.optionList').html() != $(this).parent().find('.optionList').html()) {
                        if ($(this).find('button').hasClass('inputOpen')) {
                            $(this).parent().find('.optionList').removeClass('showSelectText');
                            $(this).parent().find('.optionList').addClass('hideSelectText');
                        }
                    }
                });
                if ($this.parent().parent().find('.optionList').hasClass('hideSelectText')) {
                    $this.parent().parent().find('.optionList').removeClass('hideSelectText');
                    $this.parent().parent().find('.optionList').addClass('showSelectText');
                }
                else {
                    $this.parent().parent().find('.optionList').addClass('hideSelectText');
                }
            });
            element.find('input').bind('keydown', function () {              
                var $this = $(this);              
                $this.parent().parent().parent().find('.optionList').addClass('showSelectText')
                $this.parent().parent().parent().find('.optionList').removeClass('hideSelectText')
            });
        },
    };

});

CSS


.showSelectText {
    display:block;
}
.hideSelectText {
    display:none;

}

HTML

  <div>
       <ion-select label="SpecialityName" global-class="{{globalClass}} {{textAlign}}" placeholder-class="{{globalClass}} {{textAlign}}" placeholder-value="Speciality" label-field="SpecialityName" itemname="SpecialityName" label-id="SpecialityId" provider="SpecialityList" ng-model="speciality" />

                    </div>

read more

Convert Language From English To Arabic From Directive

Directive

app.directive('languageSeletion', function (languageData) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            key: "@"
        },
        link: function (scope, element, attr) {
           
            var value = languageData.convertData(scope.key);
            debugger
            element.html(value);          
        }
    }
});

Factory

app.factory('languageData', function (xmlTojson,$rootScope) {

    function xmlToString(xmlData) {

        return  (new XMLSerializer()).serializeToString(xmlData);        

    }

    return {

        convertData: function (key) {            

            var result;

            $.ajax({

                url: 'data/arabic.xml',

                dataType: 'xml',

                contentType:'application/xml',

                async: false,

                success: function (data) {                   

                    var jsonData = JSON.parse(xmlTojson.convertXMLToJSON(xmlToString(data))).Resources.key;                    

                    $.each(jsonData, function (index, value) {

                        if (value._value == key) {

                            if ($rootScope.language == 'EN') {

                                result = value.EN;

                            }

                            else {

                                result = value.AE;

                            }

                            return false;

                        }

                    });

                    

                }

            });

            return result;

        }

    }

});

app.factory('xmlTojson', function () {

    var x2js = new X2JS();

    return {

        convertXMLToJSON: function (data) {

            return JSON.stringify(x2js.xml_str2json(data));

        }

    }

});

HTML

<script src="scripts/xml2json.js"></script>

<span class="input-label textAlignCenter colorTheme" language-seletion key="About"></span>

read more

Ionic Datepicker With date range

var todayDate = new Date();
    todayDate.setFullYear(todayDate.getFullYear() - 90);
    $scope.getAge = function (DOB) {
        var today = new Date();
        var birthDate = new Date(DOB);
        var age = today.getFullYear() - birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
    }
  var objFromDate = {
        callback: function (val) {
            var output = $scope.getAge(val);
            if (output < 18 || output > 99) {
                alert("User age should be between 18 years to 99 years.");
                return;
            }          
           $scope.profile.Birth_date = $filter('date')(new Date(val), 'MM/dd/yyyy');
        },
        inputDate: new Date(),
        mondayFirst: true,
        templateType: 'popup',
        showTodayButton: false,
        from: todayDate,
        to: new Date(),
        dateFormat: 'MM/dd/yyyy',
        closeOnSelect: false,
    };
    $scope.dobDatePicker = function () {
        ionicDatePicker.openDatePicker(objFromDate);
    };

read more

Formate Date to mm-dd-yyyy

//Formate Date to mm-dd-yyyy
    $scope.formatDate = function (date) {
        var d = new Date(date),
            month = '' + (d.getMonth() + 1),
            day = '' + d.getDate(),
            year = d.getFullYear();

        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;

        return [year, month, day].join('-');
    }

//To Get

 data.data.Birth_date=$scope.formatDate(data.data.Birth_date);

read more

Send Push Notification With Cordova And Webapi

Cordova Plugin

https://github.com/phonegap/phonegap-plugin-push

Push Plugin

var push = PushNotification.init({
           android: {
               senderID: "628523812525"
           },
           browser: {
               pushServiceURL: 'your url'
           },
           ios: {
               alert: "true",
               badge: "true",
               sound: "true"
           },
           windows: {}
       });
       PushNotification.hasPermission(function (permissionResult) {
          if (permissionResult.isEnabled) {           
            push.on('registration', function (data) {
              alert(data.registrationId,data.registrationId);          
            });
 
            push.on('notification', function (data) {
              alert(JSON.stringify(data));
            });
 
            push.on('error', function (e) {      
              alert("e.message: " + e.message);
            });
          }
        });
      

WebAPI

//RegisterId you got from Android Developer.
string deviceId = "APA91bExfJOpM0vmKW8q200RSPs5iSPugD1mKf4PSYaFaz5TyZP2QYwmYUCDVHdNV7";
 
string message = "Demo Notification";
string tickerText = "Patient Registration";
string contentTitle = "Titlesss";
string postData =
"{ \"registration_ids\": [ \"" + deviceId + "\" ], " +
  "\"data\": {\"tickerText\":\"" + tickerText + "\", " +
             "\"contentTitle\":\"" + contentTitle + "\", " +
             "\"message\": \"" + message + "\"}}";
 
//  
//  MESSAGE CONTENT  
byte[] byteArray = Encoding.UTF8.GetBytes(postData);
 
//  
//  CREATE REQUEST  
HttpWebRequest Requests = (HttpWebRequest)WebRequest.Create("https://android.googleapis.com/gcm/send");
Requests.Method = "POST";
//  Request.KeepAlive = false;  
 
Requests.ContentType = "application/json";
Requests.Headers.Add(string.Format("Authorization: key={0}", "AIzaSyBKz7u6jeat1p09cO1"));
Requests.ContentLength = byteArray.Length;
 
Stream dataStream = Requests.GetRequestStream();
dataStream.Write(byteArray, 0, byteArray.Length);
dataStream.Close();
 
//  
//  SEND MESSAGE  
 
WebResponse Response = Requests.GetResponse();
 
HttpStatusCode ResponseCode = ((HttpWebResponse)Response).StatusCode;
if (ResponseCode.Equals(HttpStatusCode.Unauthorized) || ResponseCode.Equals(HttpStatusCode.Forbidden))
{
    var text = "Unauthorized - need new token";
}
else if (!ResponseCode.Equals(HttpStatusCode.OK))
{
    var text = "Response from web service isn't OK";
}
 
StreamReader Reader = new StreamReader(Response.GetResponseStream());
string responseLine = Reader.ReadToEnd();
Reader.Close();
 
 

read more

show image and text side by side in middle

<div class="game-menu" style="margin-top:10%">
           <img src="img/play.png" class="iconMenu" />
           <span class="iconSpan iconHeadFont">Play Again</span>
       </div>

<style type="text/css">
           .iconMenu {
               font-size: 50px;
               color: green;
               display: inline-block;
               vertical-align: middle;
               margin-top: 10px;
           }
 
           .iconSpan {
               display: inline-block;
               vertical-align: middle;
               color:white;
               font-size:40px;
               font-weight:bold;
           }
       </style>

read more