A Pen by Victor Yan

Developer
Victor Yan
Size
2,757 Kb
Views
6,072
  1. A Pen by Victor Yan Previews
  2. A Pen by Victor Yan HTML Codes
  3. A Pen by Victor Yan JS Codes

How do I make an a pen by victor yan?

What is a a pen by victor yan? How do you make a a pen by victor yan? This script and codes were developed by Victor Yan on 05 January 2023, Thursday.

A Pen by Victor Yan Previews
IQ Test

A Pen by Victor Yan - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Victor Yan</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
</head>
<body> <div class="container">
<div class="ng-scope" ng-app="app" ng-controller="Ctrl1"> <div class="col-xs-12 col-sm-6"> <h3>Multi Checkbox List Demo</h3> <div class="well"><!-- ngRepeat: role in roles -->
<label ng-repeat="role in roles"> <input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label> </div>
<div>
<h3>Selected User Roles </h3>
<pre class="ng-binding">{{user.roles|json}}</pre>
</div> <div>Provided by <a onclick="window.open('https://www.tipsoftheday.com.au')">Tips of the day</a></div> </div> <script src='https://code.angularjs.org/1.2.22/angular.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Victor Yan - Script Codes JS Codes

/** * Checklist-model * AngularJS directive for list of checkboxes */
angular.module('checklist-model', [])
.directive('checklistModel', ['$parse', '$compile', function($parse, $compile) { // contains function contains(arr, item) { if (angular.isArray(arr)) { for (var i = 0; i < arr.length; i++) { if (angular.equals(arr[i], item)) { return true; } } } return false; } // add function add(arr, item) { arr = angular.isArray(arr) ? arr : []; for (var i = 0; i < arr.length; i++) { if (angular.equals(arr[i], item)) { return arr; } } arr.push(item); return arr; } // remove function remove(arr, item) { if (angular.isArray(arr)) { for (var i = 0; i < arr.length; i++) { if (angular.equals(arr[i], item)) { arr.splice(i, 1); break; } } } return arr; } // http://stackoverflow.com/a/19228302/1458162 function postLinkFn(scope, elem, attrs) { // compile with `ng-model` pointing to `checked` $compile(elem)(scope); // getter / setter for original model var getter = $parse(attrs.checklistModel); var setter = getter.assign; // value added to list var value = $parse(attrs.checklistValue)(scope.$parent); // watch UI checked change scope.$watch('checked', function(newValue, oldValue) { if (newValue === oldValue) { return; } var current = getter(scope.$parent); if (newValue === true) { setter(scope.$parent, add(current, value)); } else { setter(scope.$parent, remove(current, value)); } }); // watch original model change scope.$parent.$watch(attrs.checklistModel, function(newArr, oldArr) { scope.checked = contains(newArr, value); }, true); } return { restrict: 'A', priority: 1000, terminal: true, scope: true, compile: function(tElement, tAttrs) { if (tElement[0].tagName !== 'INPUT' || !tElement.attr('type', 'checkbox')) { throw 'checklist-model should be applied to `input[type="checkbox"]`.'; } if (!tAttrs.checklistValue) { throw 'You should provide `checklist-value`.'; } // exclude recursion tElement.removeAttr('checklist-model'); // local scope var storing individual checkbox model tElement.attr('ng-model', 'checked'); return postLinkFn; } };
}]);
var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) { $scope.roles = [ 'guest', 'user', 'customer', 'admin' ]; $scope.user = { roles: ['user'] }; $scope.checkAll = function() { $scope.user.roles = angular.copy($scope.roles); }; $scope.uncheckAll = function() { $scope.user.roles = []; }; $scope.checkFirst = function() { $scope.user.roles.splice(0, $scope.user.roles.length); $scope.user.roles.push('guest'); };
});
A Pen by Victor Yan - Script Codes
A Pen by Victor Yan - Script Codes
Home Page Home
Developer Victor Yan
Username tipsoftheday
Uploaded January 05, 2023
Rating 3
Size 2,757 Kb
Views 6,072
Do you need developer help for A Pen by Victor Yan?

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!

Victor Yan (tipsoftheday) Script Codes
Name
Make element focusable using tabindex
HTML 5 Local Storage Example
HTML 5 Session Storage Example
Tooltip using Bootstrap
QUnit example to verify calculate age function
Bootstrap 3 button groups
Disable And Enable Input Elements In A Div Block Using jQuery
Navigation menu using Angular Directive
Tooltip using plain Javascript
TodoMVC using AngularJS
Create amazing web content 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!