AngularJS dynamically generated list with LED status

Developer
Yahya Kacem
Size
2,841 Kb
Views
48,576
  1. AngularJS dynamically generated list with LED status Previews
  2. AngularJS dynamically generated list with LED status HTML Codes
  3. AngularJS dynamically generated list with LED status CSS Codes
  4. AngularJS dynamically generated list with LED status JS Codes

How do I make an angularjs dynamically generated list with led status?

Dynamically generated list of element with a led alike status with twitter-bootstrap, Font-awesome and AngularJS.... What is a angularjs dynamically generated list with led status? How do you make a angularjs dynamically generated list with led status? This script and codes were developed by Yahya Kacem on 13 August 2022, Saturday.

AngularJS dynamically generated list with LED status Previews
IQ Test

AngularJS dynamically generated list with LED status - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS dynamically generated list with LED status</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container well" ng-app="MainApp" ng-controller="MainCtrl"
> <div class="item" ng-repeat="item in items"> <i class="icon-lightbulb {{item.status}}"></i> {{item.text}} <span id="sliderLabel"> <input type="checkbox"> <span id="slider"> <span id="sliderOn">ON</span> <span id="sliderOff">OFF</span> <span id="sliderBlock"></span> </span> </span> <span class="btn-group pull-right"> <button class="btn btn-mini btn-inverse"> <i class="icon-eye-open icon-large"></i> </button> <button class="btn btn-mini btn-danger"> <i class="icon-trash icon-large"></i> </button> </span> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js'></script>
<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>

AngularJS dynamically generated list with LED status - Script Codes CSS Codes

div.well{ margin-top: 25px;
}
div.item{ width: 500px; margin: 10px auto; background: #ffffff; border-radius: 5px; padding: 7px;
}
.icon-lightbulb.not-active{ color: red; text-shadow: 1px 1px 5px #ff0000;
}
.icon-lightbulb.active{ color: green; text-shadow: 1px 1px 3px #00ff00;
}
p { margin: 10px;
}
#sliderLabel { border: 1px solid #a2a2a2; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; display: block; height: 30px; margin: 10px auto; overflow: hidden; position: relative; width: 100px;
}
#sliderLabel input { display: none;
}
#sliderLabel input:checked + #slider { left: 0px;
}
#slider { left: -50px; position: absolute;; top: 0px; -moz-transition: left .25s ease-out; -webkit-transition: left .25s ease-out; -o-transition: left .25s ease-out; transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff { display: block; font-family: arial, verdana, sans-serif; font-weight: bold; height: 30px; line-height: 30px; position: absolute; text-align: center; top: 0px;
}
#sliderOn { background: #3269aa; background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3269aa), color-stop(100%,#82b3f4)); background: -webkit-linear-gradient(top, #3269aa 0%,#82b3f4 100%); background: -o-linear-gradient(top, #3269aa 0%,#82b3f4 100%); background: -ms-linear-gradient(top, #3269aa 0%,#82b3f4 100%); background: linear-gradient(top, #3269aa 0%,#82b3f4 100%); color: white; left: 0px; width: 54px;
}
#sliderBlock { background: #d9d9d8; background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9d9d8), color-stop(100%,#fcfcfc)); background: -webkit-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); background: -o-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); background: -ms-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); background: linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%); border: 1px solid #a2a2a2; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radisu: 3px; height: 28px; left: 50px; width: 50px;
}
#sliderOff { background: #f2f3f2; background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b8c8b), color-stop(50%,#f2f3f2)); background: -webkit-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); background: -o-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); background: -ms-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); background: linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%); color: #8b8b8b; left: 96px; width: 54px;
}

AngularJS dynamically generated list with LED status - Script Codes JS Codes

'use strict';
var app = angular.module('MainApp', []);
app.controller('MainCtrl', ['$scope', function($scope){ $scope.items = [ {"text": "Yahya Kacem", "status": "active"}, {"text": "tyoli Fuj", "status": "not-active"}, {"text": "tyolifuj", "status": "active"}, {"text": "Fuj tyoli", "status": "not-active"} ];
}]);
AngularJS dynamically generated list with LED status - Script Codes
AngularJS dynamically generated list with LED status - Script Codes
Home Page Home
Developer Yahya Kacem
Username yahyaKacem
Uploaded August 13, 2022
Rating 3
Size 2,841 Kb
Views 48,576
Do you need developer help for AngularJS dynamically generated list with LED status?

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!

Yahya Kacem (yahyaKacem) Script Codes
Name
Ng2
Menu hover text shadow
Draggable directive
A Pen by Yahya Kacem
Resizable element directive design
Generic component directive
Create amazing sales emails 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!