logo
Tags down

shadow

how to show the currently shown entries range in angular


By : Nadia Jamil
Date : October 16 2020, 08:10 AM
This might help you Browser Object Model(BOM) will not be directly available when angular bindings are evaluated like Math, console, location, window, etc. You can call them inside a function but not directly on inside binding (Thought there are ways to do that by keep that BOM property on $scope, I'd not recommend to do that). To make it working create a javascript function for inside a $scope and call it on binding level.
code :
<span id="page_info">
  Showing {{(currentPage-1) * itemsPerPage + 1}} - {{endCount(currentPage,itemsPerPage, reportCount)}} of {{reportCount}} entries
</span>
$scope.endCount = function (currentPage, itemsPerPage, reportCount) {
   return Math.min((currentPage * itemsPerPage), reportCount);
}


Share : facebook icon twitter icon

Data Table: How to show the show Entries dropdown beside the Showing 0 to 0 of 0 entries in the table structure


By : user3704231
Date : March 29 2020, 07:55 AM
With these it helps Yes, it is possible through dataTables "dom"-attribute. i is info, l is lengthmenu, insert l just before i :
code :
var table = $("#example").DataTable({
   //default is lfrtip 
   dom: 'frtlip'    
});

//lengthmenu -> add a margin to the right and reset clear 
$(".dataTables_length").css('clear', 'none');
$(".dataTables_length").css('margin-right', '20px');

//info -> reset clear and padding
$(".dataTables_info").css('clear', 'none');
$(".dataTables_info").css('padding', '0');

Angular: Next section shown before previous section hidden - using ng-show


By : Phil
Date : March 29 2020, 07:55 AM
Any of those help I was making it unnecessarily difficult for myself by focusing all my attention on making it work with ng-show or ng-switch. The problem is eliminated quickly if you just perform the showing and hiding manually through jqlite/jquery. After some refactoring, the wizard-code looks like this:
code :
// Wizard
// ======
//
// This component implements a wizard-directive and a dependent step-directive
// which together can be used to define a step-by-step wizard with arbitrary
// html in each step.
//
// Ex:
// ```html
// <wizard>
//     <step>
//         <h1>Step one</h1>
//     </step>
//     <step>
//         <h1>Step two</h1>
//     </step>
// </wizard>
// ```
//
angular.module('ssbbtip.wizard', [])


// Wizard Directive
// ----------------
//
// The main directive which defines the wizard element. A wizard can contain
// arbitrary html, but will only display a single step-element at a time. The
// directive also defines a couple of ways to navigate the wizard - through
// buttons, bottom breadcrumbs and keyboard arrow keys.
//
.directive('wizard', function($rootScope) {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: $rootScope.templateBasePath + '/components/wizard/wizard.html',
        controller: function($scope, $element) {
            // Initialize the array of steps. This will be filled by any child
            // steps added to the wizard.
            var steps = $scope.steps = [],
                // currentStep is the shadow variable supporting the
                // `$scope.currentStep` property.
                currentStep = 0;

            // This utility function will adjust a value to fit inside the
            // specified range inclusively.
            function clampToRange(min, max, value) {
                // Make sure the max is at least as big as the min.
                max = (min > max) ? min : max;

                if (value < min) {
                    return min;
                } else if (value > max) {
                    return max;
                } else {
                    return value;
                }
            }


            // This property specifies the currently visible step in the wizard.
            Object.defineProperty($scope, 'currentStep', {
                enumerable: true,
                configurable: false,
                get: function () { return currentStep; },
                set: function (value) {
                    if (value && typeof(value) === 'number') {
                        currentStep = clampToRange(0, steps.length-1, value);
                    } else {
                        currentStep = 0;
                    }
                }
            });

            // Make the imagePath available to the template.
            $scope.imagePath = $rootScope.imagePath;

            // Handle keyboard events on the wizard to allow navigation by
            // keyboard arrows.
            $scope.onKeydown = function (event) {
                event.preventDefault();
                console.log(event);
                switch (event.which) {
                    case 37: // left arrow
                    case 38: // up arrow
                        $scope.previous();
                        break;
                    case 39: // right arrow
                    case 40: // down arrow
                    case 32: // space bar
                        $scope.next();
                        break;
                }
            };

            // Move to the next step in the wizard.
            $scope.next = function () {
                $scope.currentStep = $scope.currentStep + 1;
            };

            // Move to the previous step of the wizard.
            $scope.previous = function () {
                $scope.currentStep = $scope.currentStep - 1;
            };

            $scope.onFirstStep = function() {
                return $scope.currentStep === 0;
            };

            $scope.onLastStep = function() {
                return $scope.currentStep === steps.length - 1;
            };

            // Called by the step directive to add itself to the wizard.
            this.addStep = function (step) {
                steps.push(step);
            };

            // This watches the `$scope.currentStep` property and updates the UI
            // accordingly.
            $scope.$watch(function () {
                return $scope.currentStep;
            }, function (newValue, oldValue) {
                $element.find('step .wizard__step').eq(oldValue).addClass('ng-hide');
                $element.find('step .wizard__step').eq(newValue).removeClass('ng-hide');
            });
        }
    };
})

// Step Directive
// --------------
//
// The Step Directive defines a section of code which constitues a distinct step
// in the overall goal of the wizard. The directive can only exist as a direct
// child of a wizard-tag.
//
.directive('step', function() {
    return {
        require: '^wizard', // require a wizard parent
        restrict: 'E',
        transclude: true,
        scope: true,
        template: '<div class="wizard__step ng-hide"></div>',
        link: function(scope, element, attrs, wizardCtrl, transclude) {
            // Add itself to the wizard's list of steps.
            wizardCtrl.addStep(scope);

            // Make the wizard scope available under "wizard" in the transcluded
            // html scope.
            scope.wizard = scope.$parent.$parent;

            // Transclude the tag content manually in order to set the scope.
            // This allows the content to access the `wizard.next()` and
            // `wizard.previous()` functions.
            var transDiv = angular.element(element).find('.wizard__step');
            transclude(scope, function (clone) {
                transDiv.append(clone);
            });
        }
    };
});
 <div class="wizard" tabindex="1" ng-keydown="onKeydown($event)">
     <!-- tabindex 1 is needed to make the div selectable in order to capture keydown -->
     <div class="wizard__display">
         <div class="wizard__previous" ng-click="previous()"><div class="guideBack" ng-hide="onFirstStep()"></div></div>
         <div class="wizard__content" ng-transclude></div>
         <div class="wizard__next" ng-click="next()"><div class="guideNext" ng-hide="onLastStep()"></div></div>
     </div>
     <ul class="nav wizard__tabs">
         <li ng-repeat="step in steps track by $index" ng-click="currentStep = $index" ng-class="{active: currentStep === $index}"></li>
     </ul>
 </div>

Angular Ionic App - ui-slider won't show up and neither ion-range-how can I make it visible?


By : id0q0u
Date : March 29 2020, 07:55 AM
hop of those help? Here is an example for Ionic slider.
http://codepen.io/zhipeng/pen/gBdDE

MYSQL: Create a unique index to avoid duplicate entries when many entries show 0


By : senthil kumar vs
Date : March 29 2020, 07:55 AM
may help you . The only way you can use the unique indexes is if you change all those 0's to null. nulls are considered distinct from each other in most cases (group by still groups them together).
Assuming changing them to nulls will not break tons of other queries, it can be accomplished in a single query:
code :
UPDATE reviews 
SET songid = NULLIF(songid, 0)
  , albumid = NULLIF(albumid, 0)
  , artistid = NULLIF(artistid, 0)
;

when i submit the data, it is not shown in table and show error. after refreshing it shown correctly


By : josh
Date : March 29 2020, 07:55 AM
this one helps. I want to assign the value from database , Using mysqli_connect
shadow
Privacy Policy - Terms - Contact Us © voile276.org