make Checkbox to work as radiobutton

JS

$scope.doctorStatus = [
     { title: "Available", checked: true },
     { title: "Busy", checked: false },
     { title: "NA", checked: false },
    ];
 
    $scope.UpdateSelection = function (position, itens, title) {
        angular.forEach(itens, function (subscription, index) {
            if (position != index)
                subscription.checked = false;
            else
                subscription.checked = true;
        }
        );
    }

HTML

<div class="card" ng-show="!callList.length">           
            <ion-item class="item-checkbox" ng-repeat="item in doctorStatus" style="padding:0 !important">
                <ion-checkbox ng-model="item.checked" ng-click="UpdateSelection($index, doctorStatus, item.title);">{{item.title}}</ion-checkbox>
            </ion-item>
 
        </div>

read more

Show Default Load Image Till Image Is Fully Loaded From Server

src is default image

<img load-image="{{item.ImageURL}}" src="img/rolling.gif" />

Directive

app.directive('loadImage', function () {
    return {
        restrict: 'A',
        scope: { loadImage: '@' },
        link: function (scope, element, attrs) {
            element.one('load', function () {
                element.attr('src', scope.loadImage);
            });
        }
    };
}); 

read more

Focus On Next Input On Enter

Directive

//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();
                    }
                }
            });
        }
    }
});

HTML

<label>
  <input id="email" focus type="email" ng-model="userEmail" required>
/label>
<label>
  <input id="password" focus type="password" ng-model="userPassword" required>
</label> 

read more

Validation In ModalPopUp

HTML

<script id="templates/changePassword.html" type="text/ng-template">
    <ion-modal-view class="grey_bg">
        <ion-nav-bar class="bar-balanced">
            <ion-nav-title>
                Change Password
            </ion-nav-title>
            <ion-nav-buttons side="right">
                <button class="button button-icon button-clear ion-close-round"

 ng-click="ChangePassword()"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-content class="has-header toTransofrm" padding="10">
            <div class="list">
                <form class="register-form" name="formRegister">
                    <label class="item item-input" 

ng-class="{ 'has-errors' : formRegister.oldPassword.$invalid && 

!formRegister.oldPassword.$pristine, 'no-errors' : formRegister.oldPassword.$valid}">
                        <input focus type="password" placeholder="Current Password" 

id="oldPassword" name="oldPassword" ng-model="oldPassword" required />
                    </label>
                    <label class="item item-input" 

ng-class="{ 'has-errors' : formRegister.userPassword.$invalid 

&& !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
                        <input focus type="password" placeholder="New Password" 

id="userPassword" name="userPassword" ng-model="userPassword" required />
                    </label>
                    <label class="item item-input" 

ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && 

!formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
                        <input focus type="password" id="confirmPassword" 

name="confirmPassword" placeholder="Confirm New 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>
                    <div class="button-bar bar-balanced">
                        <a class="button" ng-click="openPasswordModal()" 

ng-disabled="formRegister.$invalid" style="font-size:25px">Change Password</a>
                    </div>
                </form>
 
            </div>
 
        </ion-content>
    </ion-modal-view>
</script>

JS

//open popup model
   $scope.openPasswordModal = function (animation) {
       $ionicModal.fromTemplateUrl('templates/changePassword.html', {
           scope: $scope,
           animation: animation
       }).then(function (modal) {
           $scope.passwordModal = modal;
           $scope.passwordModal.show();
       });
   };
   //close popup model
   $scope.closePasswordModal = function () {
       $scope.passwordModal.hide();
   };

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);
                });
            });
        }
    };
}]);

read more

Call Rest Api From Javascript With XMLHttpRequest

<form accept-charset="UTF-8" method="post" action="http://go" class="form" id="form"> </form>



function sendServiceProvider() {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://go.pardot.com/l/271212/2016-11-21/4y7');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
alert('Thank you for submitting the form. We will get back to you as soon as possible.');
}
else {
alert('Request failed.  Returned status of ' + xhr.status);
}
};
var val1 = document.getElementById('271212_1336pi_271212_1336').value;
var val2 = document.getElementById('271212_1338pi_271212_1338').value;
var val3 = document.getElementById('271212_1340pi_271212_1340').value;
var val4 = document.getElementById('271212_1342pi_271212_1342').value;
xhr.send(encodeURI('271212_1336pi_271212_1336=' + val1+'&271212_1338pi_271212_1338='+val2+'&271212_1340pi_271212_1340='+val3+'&271212_1342pi_271212_1342='+val4+'&271212_1344pi_271212_1344=Service Provider'));
}

read more

Extend default Jquery function

For Example to resize canvas

(function($) {
$.fn.extend({
//Let the user resize the canvas to the size he/she wants
resizeCanvas:  function(w, h) {
var c = $(this)[0]
c.width = w;
c.height = h
}
})
})(jQuery)

$("#canvas").resizeCanvas(434, 434)



<canvas id="canvas">
</canvas>

read more

Accordion in ionic

HTML

  <div ng-repeat="(key, value) in FriendsDetail| groupBy: 'UserDivision'">
                <ion-item class="item-stable"   ng-click="toggleGroup(key)"
                    ng-class="{active: isGroupShown(key)}">
                    <i class="icon" ng-class="isGroupShown(key) ? 'ion-minus' : 'ion-plus'"></i>
                    &nbsp;
                    <span style="margin:5px;color: #7fa42d;font-weight: bold;">{{key=='2'?'Common Programs and Services ':key=='3'?'Common Friends ':key=='4'?'Common Health Interests ':''}}</span>
                </ion-item>

                <ion-item class="item-accordion"
                          ng-repeat="friend in value" ng-if="friend.Names" ng-show="isGroupShown(key)">
                    {{friend.Names}}
                </ion-item>

            </div>

Controller


        $scope.toggleGroup = function (group) {
            if ($scope.isGroupShown(group)) {
                $scope.shownGroup = null;
            } else {
                $scope.shownGroup = group;
            }
        };
        $scope.isGroupShown = function (group) {
            return $scope.shownGroup === group;

        };

read more