Security News
The Hidden Blast Radius of the Axios Compromise
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.
By Ahmad Nassri - Apr 01, 2026
New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
angular-7segments
Advanced tools
angular-7segments
Angular plugin for displaying 7segments
Usage
npm
npm install angular-7segments
bower
bower install angular-7segments --save
browser
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
...
</head>
<body>
...
<script src="path/to/bower_components/angular/angular.js"></script>
<script src="path/to/bower_components/angular-7segments/angular-7segments.js"></script>
<script>
var app = angular.module('demoApp', ['wo.7segments']);
</script>
</body>
</html>
Example
Live example
Basic
//app.js
app.controller('basicCtrl', function($scope){
$scope.value = '0123456789';
});
<!--index.html-->
<div data-ng-controller="basicCtrl">
<div seg-group data-ng-model="value"> </div>
<!-- [0][1][2][3][4][5][6][7][8][9] -->
</div>
Dot
-
Dot has some exceptions because try to reflect real seven digits.
-
Basically, dot doesn't reside in one distinct digit.
- eg) 12.34 --> [1][2.][3][4]
-
However, under the below conditions, it holds one digit.
- Dot is the first character.
- eg) .1234 --> [.][1][2][3][4]
- Dot's left character is a dot.
- eg) 1... --> [1.][.][.]
- Dot's left character is a space.
- eg) 12 .45 --> [1][2][.][4][5]
- Dot is the first character.
Supported characters
- number
- alphabet: 'SEG' ( It has a relation with module name :) )
- special character: hyphen(-), lodash(_), dot(.), space( )
Options
app.controller('optCtrl', function($scope){
$scope.value = '_-SEG.0123';
$scope.options = {
size: 15,
align: 'left',
watch: true,
};
<div data-ng-controller="basicCtrl">
<div seg-group seg-options="options" data-ng-model="value"> </div>
<!-- [_][-][S][E][G.][0][1][2][3][ ][ ][ ][ ][ ][ ]-->
</div>
Custom style
app.controlller('styleCtrl', function($scope){
$scope.value = '12345678';
$scope.digitOptions = {
onClass: 'custom-on-class', // class name for light-on part
digitClass: 'custom-digit-class' // class name for entire digit
};
);
.custom-on-class {
fill: black;
}
.custom-digit-class {
fill: #ddd;
background-color: white;
}
<div data-ng-controller="basicCtrl">
<div seg-group seg-options="options" data-ng-model="value"
seg-digit-options="digitOptions"> </div>
<!-- [1][2][3][4][5]6][7][8] -->
<!-- background color is white and light-on part color is black -->
</div>
Custom pattern
Allow to add custom segment pattern by inserting it into segMap
app.controller('patternCtrl', function($scope, segment){
var copy = angular.copy(segment.defaults.group.map);
copy['r'] = segment.arrToSegNum([0, 0, 0, 0, 1, 0, 1]);
copy['o'] = segment.arrToSegNum([0, 0, 1, 1, 1, 0, 1]);
copy['b'] = segment.arrToSegNum([0, 0, 1 ,1 ,1, 1, 1]);
$scope.value = 'bro';
$scope.options = {
map: copy
}
});
<div data-ng-controller="patternCtrl">
<div seg-group data-ng-model="value" seg-options="options"></div>
<!-- [r][o][b] -->
<!-- They are not provided basically -->
</div>
Custom shape
Allow to modify segment part coordinates by updating segPoints
app.controller('shapeCtrl', function($scope, segment) {
var copy = angular.copy(segment.defaults.digit.points);
copy[1] = "38 11, 43 6, 48 11, 48 39, 43 39, 38 34";
copy[2] = "38 46, 43 41, 48 41, 48 69, 43 74, 38 69";
copy[4] = "0 41, 5 41, 10 46, 10 69, 5 74, 0 69";
copy[5] = "0 11, 5 6, 10 11, 10 34, 5 39, 0 39";
$scope.value = '0123';
$scope.digitOptions = {
points: copy
};
});
<div data-ng-controller="shapeCtrl">
<div seg-group data-ng-model="value" seg-digit-options="digitOptions"></div>
<!-- [0][1][2][3] -->
<!-- It has right angle at middle part -->
</div>
LICENSE
FAQs
Angular plugin for displaying 7segments
We found that angular-7segments demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 15 Dec 2015
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Supply Chain Attack on Axios Pulls Malicious Dependency from npm
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
By Socket Research Team - Mar 31, 2026
Research
TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
By Socket Research Team - Mar 27, 2026