Test css counter

Developer
TabSpace
Size
2,547 Kb
Views
18,216
  1. Test css counter Previews
  2. Test css counter HTML Codes
  3. Test css counter CSS Codes
  4. Test css counter JS Codes

How do I make an test css counter?

Build tree with angular, show counter with css.. What is a test css counter? How do you make a test css counter? This script and codes were developed by TabSpace on 22 November 2022, Tuesday.

Test css counter Previews
IQ Test

Test css counter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>test css counter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<script id="others_angular_103" type="text/javascript" class="library" src="https://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<div ng-app="myapp"> <div class="ng-cloak" ng-cloak> <div ng-controller="tree" id="tree"> <tree family="mytree"></tree> </div> <div ng-controller="list" style="margin-top:30px;" id="list"> <ul>	<li ng-repeat="item in items">{{item.text}}</li> </ul> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Test css counter - Script Codes CSS Codes

body{margin:0;padding:0;background:#fff;color:000;}
p,ul,li{list-style:none;margin:0;padding:0;}
ul{padding-left:40px;}
[ng-cloak], .ng-cloak {display: none;}
#tree tree>ul{counter-reset:tree;}
#tree tree>ul>li{counter-increment: tree;}
#tree li>tree>p:before{content:counters(tree, '-') '. '; color:#0a0; font-size: 12px;}
#list ul{counter-reset:list;}
#list li:before{content:counter(list) '. '; color:#0a0; font-size: 12px;counter-increment: list;}

Test css counter - Script Codes JS Codes

var module = angular.module('myapp', []);
module.directive("tree", function($compile) {	return {	restrict: "E",	scope: {family: '='},	template: [	'<p>{{family.text}}</p>',	'<ul>',	'<li ng-repeat="item in family.items">',	'<tree family="item"></tree>',	'</li>',	'</ul>'	].join(''),	compile: function(tElement, tAttr) {	var contents = tElement.contents().remove();	var compiledContents;	return function(scope, iElement, iAttr) {	if(!compiledContents) {	compiledContents = $compile(contents);	}	compiledContents(scope, function(clone, scope) {	iElement.append(clone);	});	};	}	};
});
module.controller("tree", function($scope) {	var items = [	{},	{	items : [	{},	{	items : [{}, {}]	},	{	items : [{}, {}]	},	{	items : [	{},	{	items : [{}, {}, {}]	},	{	items : [{}, {}]	}	]	},	{},	{}	]	},	{},	{}	];	var fill = function(list, level){	level = level || 1;	list.forEach(function(item, index){	item = item || {};	item.text = 'level:' + level + '; index:' + index;	if(Array.isArray(item.items)){	fill(item.items, level + 1);	}	});	};	fill(items);	$scope.mytree = {	text : 'tree root',	items : items	};	console.log($scope.mytree);
});
module.controller("list", function($scope) {	var items = [];	for(var i = 0; i < 10; i++){	items.push({text : 'item index:' + i});	}	$scope.items = items;
});
Test css counter - Script Codes
Test css counter - Script Codes
Home Page Home
Developer TabSpace
Username tabspace
Uploaded November 22, 2022
Rating 3
Size 2,547 Kb
Views 18,216
Do you need developer help for Test css counter?

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!

TabSpace (tabspace) Script Codes
Name
Gift Card
Gradient-ticket-transparent
Gradient-apple-logo
Gradient-ticket
Gradient-demo-wave-fx
Iscroll-select-base
Gradient-purecss-card
Gradient-ui-button
Gradient-mask-image
Gradient-demo-card
Create amazing video scripts 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!