Flip switch on angular

Developer
Kazuki Harada
Size
3,110 Kb
Views
6,072
  1. Flip switch on angular Previews
  2. Flip switch on angular HTML Codes
  3. Flip switch on angular CSS Codes
  4. Flip switch on angular JS Codes

How do I make an flip switch on angular?

What is a flip switch on angular? How do you make a flip switch on angular? This script and codes were developed by Kazuki Harada on 09 December 2022, Friday.

Flip switch on angular Previews
IQ Test

Flip switch on angular - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flip switch on angular</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="app"> <head> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </script> </head> <body> <div class="container" ng-controller="sampleController"> <form class="form-horizontal" name="sampleForm" novalidate> <div class="row form-group"> <div class="col-xs-3"> <button type="button" class="btn-flip active" ng-model="singleModel" fw-radio-flip="'001'" active-value="yes" inactive-value="no"></button> </div> <div class="col-xs-6"> </div> <div class="col-xs-3"> </div> </div> </form> <h2>パターン１</h2> <div class="btn-group" role="group"> <form class="pagination-form"> <button type="submit" class="btn btn-default">&laquo;前</button> </form> <form class="pagination-form"> <input type="hidden" value="0" name="beginIndex"> <button type="submit" class="btn btn-default">1</button> </form> <div class="pagination-form"> <button type="button" class="btn btn-primary active" disabled="disabled">2</button> </div> <form class="pagination-form"> <button type="submit" class="btn btn-default">3</button> </form> <form class="pagination-form"> <button type="submit" class="btn btn-default">次&raquo;</button> </form> </div> <br/> <h2>パターン2</h2> <div class="btn-group" role="group"> <div class="pagination-form"> <button type="button" class="btn btn-default" disabled="disabled">&laquo;前</button> </div> <div class="pagination-form"> <button type="button" class="btn btn-primary active" disabled="disabled">1</button> </div> <form class="pagination-form"> <button type="submit" class="btn btn-default">2</button> </form> <form class="pagination-form"> <button type="submit" class="btn btn-default">3</button> </form> <form class="pagination-form"> <button type="submit" class="btn btn-default">次&raquo;</button> </form> </div> <br/> <h2>パターン3</h2> <div class="btn-group" role="group"> <div class="pagination-form"> <button type="button" class="btn btn-default" disabled="disabled">&laquo;前</button> </div> <div class="pagination-form"> <button type="button" class="btn btn-primary active" disabled="disabled">1</button> </div> <form class="pagination-form"> <button type="submit" class="btn btn-default">2</button> </form> <form class="pagination-form"> <button type="submit" class="btn btn-default">3</button> </form> <form class="pagination-form"> <button type="submit" class="btn btn-default">次&raquo;</button> </form> </div> <br/> <form class="btn-group"> <button type="submit" class="btn btn-default" disabled="disabled">&laquo;前</button> <button type="submit" class="btn btn-primary active" disabled="disabled">1</button> <button type="submit" class="btn btn-default">2</button> <button type="submit" class="btn btn-default">3</button> <button type="submit" class="btn btn-default">次&raquo;</button> </form> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Flip switch on angular - Script Codes CSS Codes

.flip-base {
}
.pagination-form { display: inline;
}
.btn-group > .pagination-form:first-child:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.btn-group > .pagination-form:not(:first-child):not(:last-child) { margin-left: -5px;
}
.btn-group > .pagination-form:not(:first-child):not(:last-child) > .btn { border-radius: 0;
}
.btn-group > .pagination-form:last-child:not(:first-child) { margin-left: -5px;
}
.btn-group > .pagination-form:last-child:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.btn-flip { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 2px solid #999999; border-radius: 17px; width: 90px;
}
.flip-on { text-align: right;
}
.flip-on-icon { margin-left: 5px;
}
.flip-off { text-align: left;
}
.flip-off-icon { margin-right: 5px;
}

Flip switch on angular - Script Codes JS Codes

var app = angular.module('app', []);
app.controller('sampleController', function ($scope, $log, $compile) {
});
app.constant('fwButtonConfig', { activeFlipClass: 'btn-primary flip-on', defaultFlipClass: 'btn-default flip-off', activeFlipRadioContent: 'OK', defaultFilpRadioContent: 'NG', toggleEvent: 'click'
});
app.directive('fwRadioFlip', ['fwButtonConfig', function(fwButtonConfig) { return { require: ['ngModel'], link: function(scope, element, attrs, ctrls) { var ngModelCtrl = ctrls[0]; element.find('input').css({display: 'none'}); var radioValue = scope.$eval(attrs.fwRadioFlip); var activeContent = "<span>" + (attrs.activeValue ? attrs.activeValue : fwButtonConfig.activeFlipRadioContent) + "</span>" var inactiveContent = "<span>" + (attrs.inactiveValue ? attrs.inactiveValue : fwButtonConfig.defaultFlipRadioContent) + "</span>"; //model -> UI ngModelCtrl.$render = function() { var v = angular.equals(ngModelCtrl.$modelValue, radioValue); element.toggleClass(fwButtonConfig.defaultFlipClass, !v); element.toggleClass(fwButtonConfig.activeFlipClass, v); if(v){ element.html(activeContent); }else{ element.html(inactiveContent); } }; //ui->model element.bind(fwButtonConfig.toggleEvent, function() { if (attrs.disabled) { return; } var isActive = element.hasClass(fwButtonConfig.activeFlipClass); scope.$apply(function() { ngModelCtrl.$setViewValue(isActive ? null : radioValue); ngModelCtrl.$render(); }); }); } };
}]);
Flip switch on angular - Script Codes
Flip switch on angular - Script Codes
Home Page Home
Developer Kazuki Harada
Username kazux
Uploaded December 09, 2022
Rating 3
Size 3,110 Kb
Views 6,072
Do you need developer help for Flip switch on angular?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kazuki Harada (kazux) Script Codes
Name
Canvas with AngularJS
Format text at blur
Datepicker
A Pen by Kazuki Harada
AngularJS Validate Test
Write char on canvas.
Write string on canvas.
Infinite-scroll list
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!